微信小程式 倒計時
阿新 • • 發佈:2019-01-27
專案需要做倒計時.
黃大哥的輪子.拿來用用.表示很順手.
程式碼:
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);
}
});