在電商應用的限時團購、商品秒殺中我們通常需要用到倒計時效果，那么小程序中我們應當如何實現呢？

在聚劃算中的搶購倒計時效果:

那么微信小程序中該如何實現呢？先附上效果圖：

源碼

• count.wxml

<view class="section" style="background-color:#DDDDDD;margin-left:20rpx;margin-right:20rpx;margin-top:20rpx" >
    <form bindsubmit="formSubmit" bindreset="formReset">
      <input name="input" style="margin-bottom:20rpx" class="c_Input" placeholder="請輸入時間(單位/秒)"/>
      <button style="background-color:#0066FF;color:white" formType="submit">確定</button>
    </form>
  </view>


<text style="display: block;text-align: center;font-size: 30px;color: #f60;margin-top: 50px;">
    {{clock}} {{micro_second}}
</text>

• count.js

/** 
 * 需要一個目標日期，初始化時，先得出到當前時間還有剩余多少秒
 * 1.將秒數換成格式化輸出為XX天XX小時XX分鐘XX秒 XX
 * 2.提供一個時鐘，每10ms運行一次，渲染時鐘，再總ms數自減10
 * 3.剩余的秒次為零時，return，給出tips提示說，已經截止
 */

// 定義一個總毫秒數，以一分鐘為例。TODO，傳入一個時間點，轉換成總毫秒數
var total_micro_second ;

/* 毫秒級倒計時 */
function count_down(that) {
      // 渲染倒計時時鐘
      that.setData({
          clock:date_format(total_micro_second)
      });

      if (total_micro_second <= 0) {
          that.setData({
              clock:"已經截止"
          });
          // timeout則跳出遞歸
          return ;
      }    
      setTimeout(function(){
        // 放在最后--
        total_micro_second -= 10;
        count_down(that);
    }
    ,10)
}

// 時間格式化輸出，如03:25:19 86。每10ms都會調用一次
function date_format(micro_second) {
      // 秒數
      var second = Math.floor(micro_second / 1000);
      // 小時位
      var hr = Math.floor(second / 3600);
      // 分鐘位
      var min = fill_zero_prefix(Math.floor((second - hr * 3600) / 60));
      // 秒位
    var sec = fill_zero_prefix((second - hr * 3600 - min * 60));// equal to => var sec = second % 60;
    // 毫秒位，保留2位
    var micro_sec = fill_zero_prefix(Math.floor((micro_second % 1000) / 10));

    return hr + ":" + min + ":" + sec + " " + micro_sec;
}

// 位數不足補零
function fill_zero_prefix(num) {
    return num < 10 ? "0" + num : num
}

Page({
    data: {
        clock: ''
    },
    onLoad: function() {

    },
    formSubmit: function(event) {
        console.log(event.detail.value.input);
        total_micro_second = event.detail.value.input*1000
        count_down(this);
  },
});

實例下載

• [百度云]微信小程序之倒計時
• [Coding]微信小程序之倒計時