1. 程式人生 > >微信小程式 倒計時

微信小程式 倒計時

專案需要做倒計時.
黃大哥的輪子.拿來用用.表示很順手.
倒計時

程式碼:
1.index.wxml

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

2.index.js
註釋很清楚了.不多說.

/** 
 * 需要一個目標日期,初始化時,先得出到當前時間還有剩餘多少秒
 * 1.將秒數換成格式化輸出為XX天XX小時XX分鐘XX秒 XX
 * 2.提供一個時鐘,每10ms執行一次,渲染時鐘,再總ms數自減10
 * 3.剩餘的秒次為零時,return,給出tips提示說,已經截止
 */
// 定義一個總毫秒數,以一分鐘為例。TODO,傳入一個時間點,轉換成總毫秒數 var total_micro_second = 36 * 60 * 60 * 1000; /* 毫秒級倒計時 */ 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 () { count_down(this); } });