javascript倒计时效果实现

这篇文章为大家分享了javascript倒计时效果实现代码段，现今团购网、电商网、门户网等，常使用时间记录重要的时刻，如时间显示、倒计时差、限时抢购等，特别是双十一活动，需要的朋友可以参考下

本文分析不同倒计时效果的计算思路及方法，掌握日期对象Date，获取时间的方法,计算时差的方法，实现不同的倒时计效果。

1、简单时间显示

讲解日期对象Date,并通过该对象获取时、分、秒等，让你自由提取所需时间内容。

1. <!DOCTYPE html> 
2. <html> 
3. <head> 
4. <title>获取时间</title> 
5. <script type="text/javascript"> 
6. window.onload = function(){ 
7. showTime(); 
8. } 
9.  
10. function showTime(){ 
11. var myDate = new Date(); 
12. var year = myDate.getFullYear(); 
13. var month = myDate.getMonth() + 1; 
14. var date = myDate.getDate(); 
15. var dateArr = ["日","一",'二','三','四','五','六']; 
16. var day = myDate.getDay(); 
17. var hours = myDate.getHours(); 
18. var minutes = formatTime(myDate.getMinutes()); 
19. var seconds = formatTime(myDate.getSeconds()); 
20.  
21. var systemTime = document.getElementById("time"); 
22. systemTime.innerHTML = " " + year + "年" + month +"月" + date + "日" + " 星期" + dateArr[day] + " " + hours + ":" + minutes + ":" + seconds; 
23. setTimeout("showTime()",500); 
24. } 
25.  
26. //格式化时间：分秒。 
27. function formatTime (i){ 
28. if(i < 10){ 
29. i = "0" + i; 
30. } 
31. return i; 
32. } 
33.  
34. </script> 
35. </head> 
36. <body> 
37. <div id ='time'></div> 
38. </body> 
39. </html> 

显示结果：

2、倒计时时差

讲解gettime()等方法，及计算时间的方法，学会时间相差的天数。

1. <!DOCTYPE html> 
2. <html> 
3. <head> 
4. <title>获取时间</title> 
5. <script type="text/javascript"> 
6. window.onload = function(){ 
7. deadTime(); 
8. } 
9. function deadTime(){ 
10. var nowTime = new Date(); 
11. var finalTime = new Date("2015-11-11"); 
12. var lefttime = (finalTime.getTime() - nowTime.getTime())/(1000*24*60*60); 
13. var date = Math.ceil(lefttime); 
14. document.getElementById("time").innerHTML = date; 
15. } 
16. </script> 
17. </head> 
18. <body> 
19. <div >距离双十一还有：<span id ='time'></span>天</div> 
20. </body> 
21. </html> 

显示效果：

3、限时抢购

如何运用日期对象及方法，计算相差的天、时、分、秒的方法。

1. <!DOCTYPE html> 
2. <html> 
3. <head> 
4. <title>团购——限时抢</title> 
5.  
6. </head> 
7.  
8. <body> 
9.  
10. <div class="time"> <span id="LeftTime"></span></div> 
11. </div> 
12. <script> 
13. function FreshTime() 
14. { 
15. var endtime=new Date("2015/11/11,12:20:12");//结束时间 
16. var nowtime = new Date();//当前时间 
17. var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000);  
18. d=parseInt(lefttime/3600/24); 
19. h=parseInt((lefttime/3600)%24); 
20. m=parseInt((lefttime/60)%60); 
21. s=parseInt(lefttime%60); 
22.  
23. document.getElementById("LeftTime").innerHTML="距离活动结束还剩" + d+"天"+h+"小时"+m+"分"+s+"秒"; 
24. if(lefttime<=0){ 
25. document.getElementById("LeftTime").innerHTML="团购已结束"; 
26. clearInterval(sh); 
27. } 
28. } 
29. FreshTime(); 
30. var sh; 
31. sh=setInterval(FreshTime,1000); 
32. </script> 
33. </body> 
34. </html> 

显示效果：

知识点：

1.学会使用日期对象Date和方法。

2.学会不同时间内容的获取。

3.学会计算时差的方法。

本文介绍了常见的几种倒计时效果，特别适合用于现今团购网、电商网、门户网等倒计时抢购活动，希望本文能帮助大家熟练掌握javascript倒计时效果的实现方法。