微信小程序实现倒计时

最近在做一个商城小程序的时候在订单部分有用到倒计时，比如说未支付订单在一定时间后自动关闭订单，这个时候在前端页面上就要展示倒计时。

先封装一个把时间戳转化成天时分秒格式数据的方法，这个方法也可以用于单纯的数据转换：

//timeStamp是时间戳  在这个场景下是距离订单自动关闭的时间差
getTime: function(timeStamp){
    var day = 0;
    var hours = 0;
    var minute = 0;
    var seconds = 0;
    day = Math.floor(timeStamp / 1000 / 60 / 60 / 24);//计算天数
    hours = Math.floor(timeStamp / 1000 / 60 / 60 % 24);
    minute = Math.floor(timeStamp / 1000 / 60 % 60);
    seconds = Math.floor(timeStamp / 1000 % 60);
   
    var h = this.toDouble(hours);
    var m = this.toDouble(minute);
    var s = this.toDouble(seconds);
    var rest_time={
      'day':day,
      'hours':h,
      'minutes':m,
      'seconds':s
    }
    this.setData({
      rest_time:rest_time
    });
  },
  toDouble:function(n){   //将时分秒转化成二位数格式
    return n < 10 ? "0" + n : n;
  },

然后在onLoad生命周期里写一个定时器，每隔一秒钟时间差减一并执行一次此方法：
微信小程序实现倒计时

为了以后方便复制粘贴，还是要附上代码：

onLoad: function (options) {
    var that=this;
    app.ajax(
      'order/orderDetail',
      'post',
      function(res){
        console.log(res);
        if(res.data.code==200){
          that.setData({
            orderInfo: res.data.data
          });
          // 倒计时
          var flag=setInterval(function(){
            var timeStamp = that.data.orderInfo.order_detail.rest_time;
            if (timeStamp*1000>0){
              timeStamp--;
              that.setData({
                'orderInfo.order_detail.rest_time':timeStamp
              });
              that.getTime(timeStamp*1000);
            }else{
              clearInterval(flag);
            }
          }, 1000)
        }
      },
      {
        order_id:options.id
      }
    );
  },

微信小程序实现倒计时

相关推荐