JavaScript倒計時功能實現，微信小程序倒計時

最近公司項目需要做一個功能， 商品的倒計時功能，計時結束後商品不能購買。

廢話不多說，下面來講解一下我的解決思路怎麼寫。

服務端返回服務端的時間和商品的到期時間

“到期時間”和“服務端時間”變成時間戳然後相減得出當前的秒數，秒數再轉化爲天時分秒單位

最終效果圖：

wxml：

代碼：

Page({
  data: {
    //倒計時參數
    timeCountDown:""
  },
  //計算返回倒計時時間
  countDownTime: function (systemTime, stateTime){
    //時間戳相減得到倒計時時間
    
    //2018-11-19 16:07:55 服務端時間格式
    let data_time1 = systemTime.substring(0, 4) + "-" + systemTime.substring(4, 6) + "-" + systemTime.substring(6, 8) + " " + systemTime.substring(8, 10) + ":" + systemTime.substring(10, 12) + ":" + systemTime.substring(12, 14);
    
    //2018-11-30 16:07:55 到期時間格式
    let data_time2 = stateTime.substring(0, 4) + "-" + stateTime.substring(4, 6) + "-" + stateTime.substring(6, 8) + " " + stateTime.substring(8, 10) + ":" + stateTime.substring(10, 12) + ":" + stateTime.substring(12, 14);

    var date1 = new Date(data_time1);
    var time1 = date1.getTime();
    var date2 = new Date(data_time2);
    var time2 = date2.getTime();

    console.log("time1 = " +time1);
    console.log("time2 = " + time2);
  
    let timestamp = parseInt(time2, 10) - parseInt(time1,10);
    this.countdown(timestamp);
  },

  //倒數時間顯示
  countdown: function (timestamp){
    let totalSecond = timestamp / 1000; //總秒數
    let second = totalSecond;

    // 天數位
    var that = this;
    var day = Math.floor(second / 3600 / 24);
    var dayStr = day.toString();
    if (dayStr.length == 1) dayStr = '0' + dayStr;

    // 小時位
    var hr = Math.floor((second - day * 3600 * 24) / 3600);
    var hrStr = hr.toString();
    if (hrStr.length == 1) hrStr = '0' + hrStr;

    // 分鐘位
    var min = Math.floor((second - day * 3600 * 24 - hr * 3600) / 60);
    var minStr = min.toString();
    if (minStr.length == 1) minStr = '0' + minStr;

    // 秒位
    var sec = second - day * 3600 * 24 - hr * 3600 - min * 60;
    var secStr = sec.toString();

    // timeCountDown
    let timeStr = dayStr + "天" + hrStr + "時" + minStr + "分" + secStr + "秒";
    that.setData({
      timeCountDown: timeStr
    });

    // console.log(timeStr);
    setTimeout(function () {
      timestamp -= 1000;
      that.countdown(timestamp);
    }, 1000)

  },
})

setTimeout的方法後面設置1000意思爲一秒後執行，這裏使用遞歸的方式實現時間的刷新。

本期教程到此結束，如果有什麼問題可以留言，作者看到了會盡快回復