在電商應(yīng)用的限時(shí)團(tuán)購(gòu)、商品秒殺中我們通常需要用到倒計(jì)時(shí)效果，那么小程序中我們應(yīng)當(dāng)如何實(shí)現(xiàn)呢？

在聚劃算中的搶購(gòu)倒計(jì)時(shí)效果:

那么微信小程序中該如何實(shí)現(xiàn)呢？先附上效果圖：

源碼

• 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="請(qǐng)輸入時(shí)間(單位/秒)"/>
      <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

/** 
 * 需要一個(gè)目標(biāo)日期，初始化時(shí)，先得出到當(dāng)前時(shí)間還有剩余多少秒
 * 1.將秒數(shù)換成格式化輸出為XX天XX小時(shí)XX分鐘XX秒 XX
 * 2.提供一個(gè)時(shí)鐘，每10ms運(yùn)行一次，渲染時(shí)鐘，再總ms數(shù)自減10
 * 3.剩余的秒次為零時(shí)，return，給出tips提示說(shuō)，已經(jīng)截止
 */

// 定義一個(gè)總毫秒數(shù)，以一分鐘為例。TODO，傳入一個(gè)時(shí)間點(diǎn)，轉(zhuǎn)換成總毫秒數(shù)
var total_micro_second ;

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

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

// 時(shí)間格式化輸出，如03:25:19 86。每10ms都會(huì)調(diào)用一次
function date_format(micro_second) {
      // 秒數(shù)
      var second = Math.floor(micro_second / 1000);
      // 小時(shí)位
      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;
}

// 位數(shù)不足補(bǔ)零
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);
  },
});

實(shí)例下載

• [百度云]微信小程序之倒計(jì)時(shí)
• [Coding]微信小程序之倒計(jì)時(shí)