想要实现以下效果

image.png

注意:这里只是秒级倒计时

wxml:

        <view class="end-time">
            <text class="t0">剩余：</text>
            <text class="t1">{{count_down[0]+count_down[1] || 0}}</text>    
            <text class="t0">{{count_down[2]||'天'}}</text>
            <text class="t1">{{count_down[3]+count_down[4] || 0}}</text>
            <text class="t0">:</text>
            <text class="t1">{{count_down[6]+count_down[7] || 0}}</text>
            <text class="t0">:</text>
            <text class="t1">{{count_down[9]+count_down[10]|| 0}}</text>
        </view>

JS:

let timer = null; //这里是生命在page外面
Page({
  data:{
    count_down:"",
  },
 onLoad:function(){
    timer = setInterval(()=>{
        this.date_format( 这里写到期的日期 )
    } , 1000)
  },
onHide:function(){
    timer && clearInterval(timer)//清楚定时器 防止内存泄漏
},
   // 设置时间
  date_format: function(endTime) {
      var nowTime = new Date().getTime();//现在时间（时间戳）
      var endTime = new Date(endTime).getTime();//结束时间（时间戳）
      var time = (endTime-nowTime)/1000;//距离结束的毫秒数
      // 获取天、时、分、秒
      let day = this.fill_zero_prefix(parseInt(time / (60 * 60 * 24)));
      let hr = this.fill_zero_prefix(parseInt(time % (60 * 60 * 24) / 3600));
      let min = this.fill_zero_prefix(parseInt(time % (60 * 60 * 24) % 3600 / 60));
      let sec = this.fill_zero_prefix(parseInt(time % (60 * 60 * 24) % 3600 % 60));
  
      this.setData({
        count_down:day + '天' + hr + ":" + min + ":" + sec
      })  
  },

  // 位数不足补零
  fill_zero_prefix: function (num) {
    num =  num < 0 ? 0: num;//防止出现负数
    return num < 10 ? "0" + num : num //补零操作
  },
})

主要思路:

结束时间戳 - 当前时间 = 可倒计时时间

var nowTime = new Date().getTime();//现在时间（时间戳）
var endTime = new Date(micro_second).getTime();//结束时间（时间戳）

计算出 天/小时/分/秒 的整数

let day = this.fill_zero_prefix(parseInt(time / (60 * 60 * 24))); //天
let hr = this.fill_zero_prefix(parseInt(time % (60 * 60 * 24) / 3600));//小时
let min = this.fill_zero_prefix(parseInt(time % (60 * 60 * 24) % 3600 / 60));//分钟
let sec = this.fill_zero_prefix(parseInt(time % (60 * 60 * 24) % 3600 % 60));//秒

parseInt 有向下取整的作用  12.34天 => 12天
fill_zero_prefix 只是补零操作
一天的秒数     =>   (60 * 60 * 24)
一个小时秒数   =>    3600