小程序列表倒計時 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>