小程序列表倒计时 wxs 实现

效果

代码

js
//拿到服务器时间
var serverLocalDate = data.serverLocalDate;

 //调用函数开始计时
this.serverLocalDate(serverLocalDate);

//服务器系统时间开始计时
  serverLocalDate: function(serverLocalDate) {
    var _this = this;
    let newDate = (serverLocalDate).replace(/-/g, '/'); // 获取服务器时间
    var systimestamp = new Date(newDate).getTime();
    _this.setData({
      servicetimeInterval: setInterval(function() { // 循环执行
        systimestamp = (systimestamp / 1000 + 1) * 1000;
        _this.setData({
          systimestamp: systimestamp
        })
      }, 1000)
    })
  },

wxs
var formatterTimer = function (systimestamp, compareTime) {
  var result = {};
  var nowTime = systimestamp;// 当前时间的时间戳 也就是系统时间戳
  var futureTime = getDate(compareTime).getTime();// 比较时间的时间戳
  // 未来的时间减去现在的时间 ;
  var resTime = (futureTime - nowTime) / 1000;
  // 结束时间
  var zero = futureTime - nowTime;
  if (zero >= 0) { // 认为还没有到达结束的时间
    result.h_h = (Math.floor(resTime / 3600)) < 10 ? '0' + (Math.floor(resTime / 3600)) : (Math.floor(resTime / 3600));
    result.m_m = (Math.floor(resTime / 60) % 60) < 10 ? '0' + (Math.floor(resTime / 60) % 60) : (Math.floor(resTime / 60) % 60);
    result.s_s = (resTime % 60) < 10 ? '0' + (resTime % 60) : (resTime % 60);
    result.status = true;
  } else {
    result.h_h = '00';
    result.m_m = '00';
    result.s_s = '00';
    result.status = false;
  }
  return result;
};
module.exports = {
formatterTimer: formatterTimer,
}

wxml  //先引入自己创建的wxs  也可以将方法直接写到页面内
<wxs src="../../../utils/tools.wxs" module="countdown" />

//倒计时方法内 返回参数可以根据自己的需要自行调整
<view class='daojishi '>
        <text class='font20 colorF'>剩余时间</text>
        <view class='font18'>{{countdown.formatterTimer(systimestamp,ol.endDate).h_h}}</view>
        <text class='font18'>:</text>
        <view class='font18'>{{countdown.formatterTimer(systimestamp,ol.endDate).m_m}}</view>
        <text class='font18'>:</text>
        <view class='font18'>{{countdown.formatterTimer(systimestamp,ol.endDate).s_s}}</view>
      </view>