微信小程序 - 倒计时

最近公司项目有很多用到倒计时的地方,样式如下

样式1

01天 23时 30分 24秒

格式化后台传入的时间

通过时间戳计算出对应的天，时，分，秒，在util.js中格式时间戳为我们想要的数据对象，填充到指定位置就好了

util.js

// 格式时间戳
const formatStamp = count => {
  let countDown = {}
  // ... 01天 20时 30分 20秒     29:33  常规支付限时30分钟
  countDown.day = completion(Math.floor(count / 86400))

  countDown.hour = Math.floor(count / 3600)
  countDown.hour = completion(countDown.hour >= 24 ? countDown.hour % 24 : countDown.hour)

  countDown.minutes = Math.floor(count / 60)
  countDown.minutes = completion(countDown.minutes >= 60 ? countDown.minutes % 60 : countDown.minutes)

  countDown.seconds = completion(count % 60)
  
  return countDown
}
// 补全个位：1-》01
const completion = time => {
  return time >= 10 ? time : `0${time}`
}

module.exports = {
  completion,
  formatStamp
}

调用util中formatStamp

pages/test/test.js

data: {
    stamp: 100000,
    times: {}
},
onload() {
    this.StartCountdown(stamp)
},
// 启动计时器
StartCountdown (stamp) {
    this.timer = setInterval(() => {
        stamp--
        this.setData({
            times: formatStamp(stamp)
        })
        if (stamp === 0) {
            clearInterval(this.timer)
        }
    }, 1000)
}

最后根据页面需求组合时间单位