微信小程序设置倒计时效果

效果

微信小程序设置倒计时步骤

1.设置一个定时器,然后将时间设为一秒
2.在这个函数里将当前时间距终止的时间,的时间戳的差值减一
3.计算剩余的时间,还剩的时分秒等
4.将计算的时间保存到data中

坑

一定要计算后的结果,一定要保存,不然倒计时没有效果

话不多说,上代码

Page({
  data: {
    intervarID: '',//定时器名字
    time_diff:0,//时间差
    day: 0,//天
    hourse: 0,//小时
    minute: 0,//分
    second: 0,//秒
    },
	//定时器
  countDown: function () {
    var that = this;
    var now_time = that.data.time_diff;//获取时间差
    this.data.intervarID = setInterval(function () {//设置定时器
      //将时间差减一秒
      now_time--;
	  //计算天时分秒
      let d = Math.floor((now_time - (now_time % 86400)) / 86400);
      let h = Math.floor((now_time % 86400) / 3600);
      let m = Math.floor((now_time % 3600) / 60);
      let s = now_time % 60;
      //将计算结果保存至data
      that.setData({
        day: d,
        hourse: h,
        minute: m,
        second: s,
      });
      //当时间差为0时,清除定时器
      if (d <= 0 && h <= 0 && m <= 0 && s <= 0) {
        clearInterval(that.data.intervarID);
      }
    }, 1000
    )
  },
   /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  //定时器开始
  this. countDown();
  },
)