倒計時的功能在我們做項目的時候會經(jīng)常遇到，這里給大家分享的是個人編寫的一個簡易的效果代碼，有需要的小伙伴可以參考下

在前端開發(fā)中，難免會用到倒計時。如做的雙十一活動，在距活動開始的半個月前需要做些宣傳工作，需要告知用戶優(yōu)惠活動什么時候開始。這個時候就要用到倒計時，如在整站的某個頁面提醒用戶活動什么時候開始等。而在活動的后期，特別是在距活動結(jié)束僅有1天左右時，就要用到彈窗倒計時。這個倒計時設(shè)置在整站的首頁頂部(當(dāng)然也可以設(shè)置在其它地方，如首頁中部等)，并設(shè)置彈窗彈出10秒后自動消失，由用戶決定是否點擊到相應(yīng)的活動頁面，購買產(chǎn)品。

需要的技術(shù)支持：CSS3，jQuery庫;

HTML代碼如下：

1. <section class="the_body"> 
2. <div class="countdown"> 
3. <h3>距中國雄于地球之日還有</h3> 
4. <div class="countdown_time"> 
5. <span class="the_days"><i>0</i><i>3</i></span> 
6. <i class="date_text">天</i> 
7. <span class="the_hours"><i>0</i><i>7</i></span> 
8. <i class="date_text">時</i> 
9. <span class="the_minutes"><i>4</i><i>7</i></span> 
10. <i class="date_text">分</i> 
11. <span class="the_seconds"><i>1</i><i>1</i></span> 
12. <i class="date_text">秒</i> 
13. </div> 
14. </div> 
15. </section> 

css代碼如下：

1. .the_body{width: 100%;max-width: 640px;min-width: 320px;margin: 0 auto;} 
2. .countdown{background:#ffec20;padding: 10px 0;} 
3. .countdown h3{margin:0;padding:5px 0;color:#f53544;text-align:center;font-size:14px;} 
4. .countdown .countdown_time{display:block;width:100%;text-align:center;} 
5. .countdown .countdown_time i{display:inline-block;position:relative;padding:0 3px;font-style:normal;background:#fff; 
6. margin:0 2px;border-radius:3px;box-shadow:0px 1px 1px #ccc;border-bottom:1px solid #cfcfcf;font-weight 
7. :bold;} 
8. .countdown .countdown_time i:after{content:"";width:100%;border:1px solid #cfcfcf;border-width:1px 0 0;position:absolute; 
9. bottom:1px;left:0;} 
10. .countdown .countdown_time i:before{content:"";width:100%;border:1px solid #cfcfcf;border-width:1px 0 0;position:absolute; 
11. bottom:3px;left:0;} 
12. .countdown .countdown_time .date_text{background:transparent;font-weight:bold;box-shadow:none; 
13. border-bottom:none;text-decoration:none;padding: 0;} 
14. .countdown .countdown_time .date_text:after{content:"";border:none;} 
15. .countdown .countdown_time .date_text:before{content:"";border:none;} 

JavaScript代碼如下：

1. <script> 
2. function remaintime() { 
3. var date = new Date("Jan 1,2015 00:00:00");//設(shè)置倒計時結(jié)束時間 
4. var nowdate = new Date();//獲取當(dāng)前日期 
5. var remaintime = date.getTime() - nowdate.getTime();//獲取現(xiàn)在到倒計時結(jié)束時間的毫秒數(shù) 
6. var remainday = Math.floor(remaintime / (1000 * 60 * 60 * 24));//計算求得剩余天數(shù) 
7. var remainhour = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24)/ (1000 * 60 * 60));//計算求得剩余小時數(shù) 
8. var remainminute = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24 - remainhour * 1000 * 60 * 60)/ (1000 * 60));//計算求得剩余分鐘數(shù) 
9. var remainsecond = Math.floor((remaintime - remainday * 1000 * 60 * 60 * 24- remainhour * 1000 * 60 * 60 - remainminute * 
10. 1000 * 60) / (1000));//計算求得剩余秒數(shù) 
11. //當(dāng)剩余天數(shù)小于10時，就在其前加一個0，以下剩余小時數(shù)、分鐘數(shù)與秒數(shù)與此相同 
12. if (remainday < 10) { 
13. remainday = "0" + remainday; 
14. }else{remainday+=""; 
15. //當(dāng)剩余天數(shù)大于10時，剩余天數(shù)為數(shù)值，這是需要將該值轉(zhuǎn)換為字符串，以下的剩余小時數(shù)、分鐘數(shù)與秒數(shù)與此相同 
16. } 
17. if (remainhour < 10) { 
18. remainhour = "0" + remainhour; 
19. }else{remainhour+="";} 
20. if (remainminute < 10) { 
21. remainminute = "0" + remainminute; 
22. }else{remainminute+="";} 
23. if (remainsecond < 10) { 
24. remainsecond = "0" + remainsecond; 
25. }else{remainsecond+="";} 
26. $(".the_days i:first-child").html(remainday.substr(0, 1)); 
27. $(".the_days i:last-child").html(remainday.substr(1, 2)); 
28. $(".the_hours i:first-child").html(remainhour.substr(0, 1)); 
29. $(".the_hours i:last-child").html(remainhour.substr(1, 2)); 
30. $(".the_minutes i:first-child").html(remainminute.substr(0, 1)); 
31. $(".the_minutes i:last-child").html(remainminute.substr(1, 2)); 
32. $(".the_seconds i:first-child").html(remainsecond.substr(0, 1)); 
33. $(".the_seconds i:last-child").html(remainsecond.substr(1, 2)); 
34. setTimeout("remaintime()",1000);//設(shè)置1秒后調(diào)用remaintime函數(shù) 
35. } 
36. remaintime(); 
37. setTimeout(function(){$(".countdown").hide();},10000);//在首頁設(shè)置的彈窗效果，在分頁這段代碼可以不設(shè)置 
38. </script> 

這是我自己寫的倒計時效果，當(dāng)然每個人都可以根據(jù)自己的愛好，設(shè)置倒計時的效果。如你可以只顯示“幾天幾時幾分”，但個人覺得沒有設(shè)置到“幾天幾時幾分幾秒”夠氣氛。這里的樣式也都可以根據(jù)自己的喜好改動，但最終的效果都是制造活動開始前的火熱氛圍。

至于這里的html代碼、css代碼及JavaScript代碼需要注意的也說下：

1.html代碼就不多說，主要就是怎么設(shè)置dom，以易于JavaScript操作;

2.css代碼，這里主要用了:before與:after偽類，設(shè)置倒計時數(shù)值的立體效果;

3.JavaScript代碼也是很簡單的一個函數(shù)，這里你需要將得到的剩余時間轉(zhuǎn)換為字符串，以便于字符串的截取顯示等。另外，用setTimeout函數(shù)設(shè)置隔1秒執(zhí)行一次函數(shù)，以動態(tài)顯示剩余時間，當(dāng)然也可以用setInterval函數(shù)，這兩個函數(shù)設(shè)置的效果基本相同。

至此，一個簡單的倒計時效果就做出來了。如果要在首頁設(shè)置彈窗倒計時，你可以把背景設(shè)置的更炫酷一點，這樣可以吸引用戶點擊，并設(shè)置10秒后彈窗自動消失(或者設(shè)置一個關(guān)閉按鈕等)。

倒計時的實現(xiàn)可以有很多種方式，在這里也就先介紹這一種，以后有時間將會繼續(xù)總結(jié)。

以上所述就是本文的全部內(nèi)容了，希望能夠?qū)Υ蠹伊私鈐avascript有所幫助。