很多網(wǎng)站會出現(xiàn)倒計時功能，但是根據(jù)不同需求，其表現(xiàn)形式和邏輯千變?nèi)f化。

下面借這篇blog談?wù)勛约旱捏w會。

　　1，明確需求

用戶進入頁面，逢整點前十分鐘開始倒計時，整點開始正計時，10分鐘后停止計時功能，其它時間隱藏計時。

需求文字只有短短一句話，但包含的要求卻很多，從中可以得到如下要點：

1)得到用戶進入頁面時間userTime;

2)既有倒計時，也有正計時;

3)需要對userTime進行判斷，確定是倒計時，正計時還是隱藏計時;

4)如果是隱藏計時，并且用戶一直未離開頁面，計時功能到點也需要正常啟動。

　　2，梳理邏輯

如果將開發(fā)功能比作搭建房屋的話，那邏輯梳理就好比搭建房屋框架，其重要性不言而喻。

將需求文字以示例(最好配圖)展現(xiàn)，可以幫助理解，以9:00-10:00為例：

到這里為止，房屋框架搭建完成。

　　3，計時方法

利用javascript開發(fā)頁面計時功能最常用的核心方法有2個：setTimeout和setInterval。

那到底選取哪個較為合適?

其實都可以，甚至setInterval的代碼會相對少一些，但是在《javascript高級程序設(shè)計(第二版)》里有這樣一段話：一般認為，使用超時調(diào)用來模擬間歇調(diào)用是一種最佳模式，原因是后一個間歇調(diào)用可能會在前一個間歇調(diào)用結(jié)束之前啟動。

想深入了解的同學(xué)可以看看這篇文章，點擊這里。

　　4，拆分時間

先看效果圖：

如果用圖片，有2個問題：

　　1)如何用圖片展示變化的時間?

比如說 11:58:13 ，來看看html代碼：

.lz_gift_btn .djs .n_0{background-position:0 0;}

.lz_gift_btn .djs .n_1{background-position:0 -10px;}

.lz_gift_btn .djs .n_2{background-position:0 -20px;}

.lz_gift_btn .djs .n_3{background-position:0 -30px;}

.lz_gift_btn .djs .n_4{background-position:0 -40px;}

.lz_gift_btn .djs .n_5{background-position:0 -50px;}

.lz_gift_btn .djs .n_6{background-position:0 -60px;}

.lz_gift_btn .djs .n_7{background-position:0 -70px;}

.lz_gift_btn .djs .n_8{background-position:0 -80px;}

.lz_gift_btn .djs .n_9{background-position:0 -90px;}

還有雪碧圖：

var nowTime = new Date(),

nMS=endTime – nowTime.getTime(),

myH=Math.floor(nMS/(1000*60*60)) % 24,

myM=Math.floor(nMS/(1000*60)) % 60,

myS=Math.floor(nMS/1000) % 60,

myMS=Math.floor(nMS/100) % 10,

myMa=0,

myMb=myM;

$(‘#m_a’).removeClass().addClass(‘n_’+myMa);

$(‘#m_b’).removeClass().addClass(‘n_’+myMb);

if (myS>9){

var mySa=myS.toString().substr(0,1),

mySb=myS.toString().substr(1,1);

}else{

mySa=0;

mySb=myS;

}

$(‘#s_a’).removeClass().addClass(‘n_’+mySa);

$(‘#s_b’).removeClass().addClass(‘n_’+mySb);

$(‘#u_a’).removeClass().addClass(‘n_’+myMS);

if (nMS>0){

setTimeout(giftDjs,100);

}

}

把時間變化與樣式名對應(yīng)起來，從而達到類似電子表的展現(xiàn)形式。

　　2)如何進一步拆分、秒、毫秒?

接著上面的示例時間，通過javascript時間函數(shù)，可以取到11分，58秒，13毫秒;但這還不夠，為了達到效果，還需要拆到個位數(shù)。這里給出一個簡單的方法，利用toString方法把時間轉(zhuǎn)換成字符串，再用字符串截取函數(shù)substr得到需要的結(jié)果，代碼如下：mySa=myS.toString().substr(0,1);

mySb=myS.toString().substr(1,1);

把第四點內(nèi)容延伸，充分發(fā)揮想象力，可以做出更多更炫的計時效果，比如數(shù)字滑動，翻牌等等。整個項目完成上線后，效果比預(yù)期好，點擊進入的頁面流量翻了一倍還多，如圖：

來源：騰訊GDC