今天給大家?guī)?b>微信小程序倒計時組件具體開發(fā)步驟：
先來看下最終效果：
源碼：http://download.csdn.net/download/acmdown/9931482
分步驟-性子急的朋友敛苇，可以直接看最后那段代碼。
wxml文件放個text
second: {{second}} micro second:{{micro_second}}
在js文件中調(diào)用
function countdown(that) { ?var second = that.data.second ?if (second == 0) { ? ?// console.log("Time Out...");
that.setData({
second: "Time Out..."
}); ? ?return ;
} ?var time = setTimeout(function(){
that.setData({
second: second - 1
});
countdown(that);
}
,1000)
}
Page({
data: {
second: 3
},
onLoad: function() {
countdown(this);
}
});
運行驗證下，從10走到1s瞧壮，然后顯示時間到。
于是繼續(xù)將毫秒完善，注意毫秒的步長受限于系統(tǒng)的時間頻率，于是我們精確到0.01s即10ms
js
/* 秒級倒計時 */function countdown(that) { ?var second = that.data.second ?if (second == 0) {
that.setData({
second: "Time out!",
micro_second: "micro_second too."
});
clearTimeout(micro_timer); ? ?return ;
} ?var timer = setTimeout(function(){
that.setData({
second: second - 1
});
countdown(that);
}
,1000)
}/*
毫秒級倒計時 */// 初始毫秒數(shù)供璧，同時用作歸零var micro_second_init = 100;// 當前毫秒數(shù)var
micro_second_current = micro_second_init;// 毫秒計時器var
micro_timer;function countdown4micro(that) { ?if (micro_second_current
<= 0) {
micro_second_current = micro_second_init;
}
micro_timer = setTimeout(function(){
that.setData({
micro_second: micro_second_current - 1
});
micro_second_current--;
countdown4micro(that);
}
,10)
}
Page({
data: {
second: 2,
micro_second: micro_second_init
},
onLoad: function() {
countdown(this);
countdown4micro(this);
}
});
wxml文件
second: {{second}}s{{micro_second}}
如此，當秒級運行完畢時冻记，毫秒級timer即clearTimeout睡毒，并將字本顯示為'micro_second too'
再添加一個countdown4micro方法，使得顯示剩余 0:3:19 89這樣形式的倒數(shù)
function
dateformat(second) { ? ?var dateStr = ""; ? ?var hr = Math.floor(second
/ 3600); ? ?var min = Math.floor((second - hr * 3600) / 60); ? ?var sec
= (second - hr * 3600 - min * 60);// equal to => var sec = second %
60;
dateStr = hr + ":" + min + ":" + sec; ? ?return dateStr;
}
目前有2個時鐘冗栗，影響性能演顾，合并下去掉countdown供搀，于是countdown4micro變成以下的樣子：
function countdown4micro(that) { ? ?var loop_second = Math.floor(loop_index / 100); ? ?// 得知經(jīng)歷了1s
if (cost_micro_second != loop_second) { ? ? ? ?// 賦予新值
cost_micro_second = loop_second; ? ? ? ?// 總秒數(shù)減1
total_second--;
} ? ? ?// 每隔一秒，顯示值減1; 渲染倒計時時鐘
that.setData({
clock:dateformat(total_second - 1)
}); ? ? ?if (total_second == 0) {
that.setData({ ? ? ? ? ?// micro_second: "",
clock:"時間到"
});
clearTimeout(micro_timer); ? ? ? ?return ;
}
if (micro_second_current <= 0) {
micro_second_current = micro_second_init;
}
micro_timer = setTimeout(function(){
that.setData({
micro_second: micro_second_current - 1
});
micro_second_current--; ? ?// 放在最后++偶房，不然時鐘停止時還有10毫秒剩余
loop_index ++;
countdown4micro(that);
}
,10)
}
如此這般趁曼，毫秒與時分秒是分別運行渲染的军浆，再次改造棕洋，程序可讀性更好。dateformat針對于毫秒操作乒融，而不接受秒為數(shù)掰盘。同時還省卻了計算100次為1s的運算
/**
* 需要一個目標日期，初始化時赞季，先得出到當前時間還有剩余多少秒
* 1.將秒數(shù)換成格式化輸出為XX天XX小時XX分鐘XX秒 XX
* 2.提供一個時鐘愧捕，每10ms運行一次，渲染時鐘申钩，再總ms數(shù)自減10
* 3.剩余的秒次為零時次绘，return，給出tips提示說撒遣，已經(jīng)截止
*/// 定義一個總毫秒數(shù)邮偎，以一分鐘為例。TODO义黎，傳入一個時間點禾进，轉(zhuǎn)換成總毫秒數(shù)var total_micro_second = 2 *
1000;/* 毫秒級倒計時 */function countdown(that) { ? ? ?// 渲染倒計時時鐘
that.setData({
clock:dateformat(total_micro_second)
}); ? ? ?if (total_micro_second <= 0) {
that.setData({
clock:"已經(jīng)截止"
}); ? ? ? ? ?// timeout則跳出遞歸
return ;
}
setTimeout(function(){ ? ? ? ?// 放在最后--
total_micro_second -= 10;
countdown(that);
}
,10)
}// 時間格式化輸出，如3:25:19 86廉涕。每10ms都會調(diào)用一次function dateformat(micro_second) { ? ? ?// 秒數(shù)
var second = Math.floor(micro_second / 1000); ? ? ?// 小時位
var hr = Math.floor(second / 3600); ? ? ?// 分鐘位
var min = Math.floor((second - hr * 3600) / 60); ? ? ?// 秒位
var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;
// 毫秒位泻云，保留2位
var micro_sec = Math.floor((micro_second % 1000) / 10); ? ?return hr + ":" + min + ":" + sec + " " + micro_sec;
}
Page({
data: {
clock: ''
},
onLoad: function() {
countdown(this);
}
});
經(jīng)過如上優(yōu)化，代碼量減少一半狐蜕，運行效率也高了宠纯。
