微信小程序 订单列表 倒计时（多个）实现

先看效果 一，在js页面 获取系统当前时间戳

onShow: function () {
          
   
    //拿到服务器时间
    var serverLocalDate = new Date().getTime();
    //调用函数开始计时
    this.serverLocalDate(serverLocalDate);
  },

	***************************


  //服务器系统时间开始计时
  serverLocalDate: function (serverLocalDate) {
          
   
    console.log(serverLocalDate)
    var _this = this;
    let newDate = serverLocalDate;
    _this.setData({
          
   
      servicetimeInterval: setInterval(function () {
          
    // 循环执行  
        newDate = (newDate / 1000 + 1) * 1000;
        _this.setData({
          
   
          systimestamp: newDate
        })
      }, 1000)  // 每秒执行一次以达到更新时间的目的
    })
  },

在 util 目录下创建一个 time.wxs 文件

var formatterTimer = function (systimestamp, compareTime) {
          
   
    var result = {
          
   };
    var nowTime = systimestamp; // 当前时间的时间戳 也就是系统时间戳

    var reg = getRegExp("-", "g"); // 获取正则表达式，全局替换
    var str = compareTime.replace(reg, /); // 时间格式转换
    // 将字符串转换成时间格式
    var timePublish = getDate(str).valueOf();

    var futureTime = getDate(timePublish).getTime(); // 比较时间的时间戳
    // 未来的时间减去现在的时间 ;
    var resTime = (futureTime - nowTime) / 1000;
    // 结束时间
    var zero = futureTime - nowTime;
    if (zero >= 0) {
          
    // 认为还没有到达结束的时间
        var h = (Math.floor(resTime / 3600)) < 10 ? 0 + (Math.floor(resTime / 3600)) : (Math.floor(resTime / 3600));
        var m = (Math.floor(resTime / 60) % 60) < 10 ? 0 + (Math.floor(resTime / 60) % 60) : (Math.floor(resTime / 60) % 60);
        var s = (Math.floor(resTime % 60)) < 10 ? 0 + (Math.floor(resTime % 60)) : (Math.floor(resTime % 60));

        result = h + : + m + : + s;
        result.status = true;
    } else {
          
   

        result = 00:00:00;
        result.status = false;
    }
    return result;
};
module.exports = {
          
   
    formatterTimer: formatterTimer,
}

在 wxml 页面 调用 time.wxs

引入

<wxs src="../../utils/time.wxs" module="countdown" />

调用

<text class="time">{
          
   {
          
   countdown.formatterTimer(systimestamp,closeTime)}}</text>

解释一下：

systimestamp ==> 系统时间。

closeTime ==> 你自己定义的 或 后台返回的结束时间 如 2020-12-17 15:22:33 请一定要按照这个格式。

其他的请看代码上的注释，写的很清楚了。