微信小程序倒计时功能

微信小程序倒计时功能
1、在wxml页面中写入倒计时功能代码，设计倒计时功能。依次从天、时、分、秒写入代码。

    
  距结束
  {{qgdjs_jo.day}}
  天
  {{qgdjs_jo.hour}}
  时
  {{qgdjs_jo.min}}
  分
  {{qgdjs_jo.sec}}
  秒

2、在wxss里面设置计时器的样式

.body{
  display: flex;
  width: 100%;
  align-items: center;
  font-size: 12px;
  flex-direction: row;
  justify-content: flex-end;
}

.time1{
  color: #f02a46;
  padding-right: 2px;
  padding-left: 2px;
}

.text1{
  color: #fff;
  background: #f02a46;
  border-radius: 5px;
  padding: 2px;
}

2、在data中定义倒计时中要用到的变量。结束时间（jssj),定时器名称等，结束时间一般都是从后台获取的。

Page({
  data: {
   
    jssj:"2020-07-24 07:23:00",                                   //设置结束时间
    
    timer:"",                                                     //倒计时定时器名称
    
    qgdjs_jo:{ day : "00", hour: "00", min: "00", sec: "00"}      //抢购倒计时
   
  },

3、然后编写计时器函数，主要用到了定时器的功能。

countDown:function(){
  let that = this;

      that.setData({
        timer: setInterval(function(){

           var lefttime = parseInt((new Date(that.data.jssj.replace(/-/g,"/")).getTime() - new Date().getTime()));

           if(lefttime <= 0) {
             that.setData({
               qgdjs_jo:{day:"00",hour:"00",min:"00",sec:"00"}
             })
             clearInterval(that.data.timer);
             return;
           }

           var d = parseInt(lefttime /1000 /3600 /24);  //天数
           var h = parseInt(lefttime / 1000 / 3600 % 24); //小时
           var m = parseInt(lefttime / 1000 / 60 % 60);    //分钟
           var s = parseInt(lefttime / 1000  % 60);        //当前的秒

           d < 10 ? d = "0" + d : d;
           h < 10 ? h = "0" + h : h;
           m < 10 ? m = "0" + m : m;
           s < 10 ? s = "0" + s : s;
           
           that.setData({
             qgdjs_jo:{ day: d, hour: h, min: m, sec:s }
           })
        },1000)
      })
  },

然后 调用计时器函数，一般都是在onload中执行。

 onLoad: function () {
    var that = this;
    that.countDown();
  },

然后就可以了

167092F6-E632-47A5-A650-A105ED5A74D9.png