微信小程序实现倒计时

微信小程序实现倒计时，将来的某一时间点到现在的时间

显示效果：

js 代码实现：

let downTime = ‘’ //设置这个的原因是：页面的隐藏和卸载都可以停止倒计时
Page({
/**

• 页面的初始数据
  */
  data: {
  endTime:“2021/06/07 00:00:00”, // 最终时间 （注意：2020.06.07 苹果手机识别不了！）
  countTime:“00天 00:00:00” //页面完全显示时，所呈现的格式（有利使用者体验）
  },

/**

• 生命周期函数–监听页面加载
  */
  onLoad: function (options) {
  this.getTime()
  },

//倒计时实现代码
getTime(){
downTime = setInterval( res => { // 这里要注意一下，如果是使用function（）{}，的话，下面的this就会报错！注意！！！
const startTime = new Date().getTime()
const endTime = new Date(this.data.endTime).getTime()
let leftTime = endTime - startTime //剩余时间
if(leftTime > 0){
let day = this.changeTime(Math.floor(leftTime/1000/60/60/24))
let hour = this.changeTime(Math.floor(leftTime/1000/60/60%24))
let min = this.changeTime(Math.floor(leftTime/1000/60%60))
let sec = this.changeTime(Math.floor(leftTime/1000%60))
let countTime = day +‘天’+’ ‘+’ ‘+hour+’:’+min+’:’+sec
this.setData({
countTime:countTime
})
}
},1000)
},

//补 0 函数
changeTime(time){
time = time >= 10 ? time : ‘0’+time
return time
},
/**

• 生命周期函数–监听页面隐藏
  */
  onHide: function () {
  //页面隐藏停止倒计时
  clearInterval(downTime)
  },

/**

• 生命周期函数–监听页面卸载
  */
  onUnload: function () {
  //页面卸载停止倒计时
  clearInterval(downTime)
  }
  })
  2021.01.01