本文是對類似于拼團，多個商品每個都有各自的倒計時，一開始接到接到這個需求也是頭疼了一陣子，如果是在商品列表少的時候完全就可以寫成死的，固定的變量，寫幾個定時器就ok了，

但是這次數據是活的，看一些拼團app都可以實現，既然能實現就搞起來，有了以下的想法 使用環境 vue

寫一個準備渲染的死數據

data () { return {  list: [ // 準備渲染的數據   {    remainTime: 900000, // 距離結束還有多久    remainTimeStr: '' // 展示文案   },   {    remainTime: 400000,    remainTimeStr: ''   },   {    remainTime: 60500,    remainTimeStr: ''   },  ] }}

百度copy一個倒計時的方法

countdowm (timestamp) { let self = this let timer = setInterval(function () {  let nowTime = new Date()  let endTime = new Date(timestamp)  let t = endTime.getTime() - nowTime.getTime()  if (t > 0) {   let day = Math.floor(t / 86400000)   let hour = Math.floor((t / 3600000) % 24)   let min = Math.floor((t / 60000) % 60)   let sec = Math.floor((t / 1000) % 60)   hour = hour < 10 ? '0' + hour : hour   min = min < 10 ? '0' + min : min   sec = sec < 10 ? '0' + sec : sec   let format = ''   if (day > 0) {    format = `${day}天${hour}小時${min}分${sec}秒`   }   if (day <= 0 && hour > 0) {    format = `${hour}小時${min}分${sec}秒`   }   if (day <= 0 && hour <= 0) {    format = `${min}分${sec}秒`   }   self.content = format  } else {   clearInterval(timer)   self.content = 'over'  } }, 1000)}

捋清邏輯

首先， 根據邏輯對倒計時的方法進行更改,我們直接使用的就是距離結束還有多少時間的時間戳 ，我的思路是用一個定時器達到一個并行多個倒計時的思路，所以先將方法進行優化

countdowm (timestamp) { let self = this let timer = setInterval(function () {  let t = timestamp  if (t > 0) {   let day = Math.floor(t / 86400000)   let hour = Math.floor((t / 3600000) % 24)   let min = Math.floor((t / 60000) % 60)   let sec = Math.floor((t / 1000) % 60)   day = day < 10 ? '0' + day : day   hour = hour < 10 ? '0' + hour : hour   min = min < 10 ? '0' + min : min   sec = sec < 10 ? '0' + sec : sec   let format = ''   format = `${day}天${hour}小時${min}分${sec}秒`   self.content = format  } else {   // clearInterval(timer)   self.content = 'over'  } }, 1000)}

簡化完畢， 把自己剛才的思路帶進方法內

在定時器里 寫一個循環 每次減少一秒 讓當前數據內remainTime時間戳-1000

countdown () { let self = this let timer = setInterval(function () {  for (let i = 0; i < self.list.length; i++) {   self.list[i].remainTime -= 1000   let t = self.list[i].remainTime   if (t > 0) {    let day = Math.floor(t / 86400000)    let hour = Math.floor((t / 3600000) % 24)    let min = Math.floor((t / 60000) % 60)    let sec = Math.floor((t / 1000) % 60)    day = day < 10 ? '0' + day : day    hour = hour < 10 ? '0' + hour : hour    min = min < 10 ? '0' + min : min    sec = sec < 10 ? '0' + sec : sec    let format = ''    format = `距離結束：<b>${day}</b> 天 <b>${hour}</b> 時 <b>${min}</b> 分 <b>${sec}</b> 秒`    self.list[i].remainTimeStr = format    } else {    // 進行判斷 如果數據內所有的倒計時已經結束，那么結束定時器， 如果沒有那么繼續執行定時器    let flag = self.list.every((val, ind) =>  val.remainTime <= 0)    if (flag) clearInterval(timer)    self.list[i].remainTimeStr = `距離結束：<b>00</b> 天 <b>00</b> 時 <b>00</b> 分 <b>00</b> 秒` // 結束文案    }  } }, 1000)}