比较全的JavaScript倒计时脚本[xyytit]

时间：2022-01-03 22:04:34

需要做一个功能，给特定的活动或者商品添加一个倒计时提示，在网上找了好些方法，总结了比较好的一些方法，以备后用：

1. 比较长时间的倒计时（如：距离2014年还有0年, 0月, 30天, 9小时, 41分, 17秒）

 1 <script type="text/javascript">   
 2 startclock();
 3 var timerID = null;   
 4 var timerRunning = false;   
 5 function showtime() {   
 6     Today = new Date();
 7     var year = Today.getFullYear();
 8     document.getElementById("next_yeat").innerHTML = year + 1;
 9     var NowHour = Today.getHours();   
10     var NowMinute = Today.getMinutes();   
11     var NowMonth = Today.getMonth();   
12     var NowDate = Today.getDate();   
13     var NowYear = Today.getYear();   
14     var NowSecond = Today.getSeconds();   
15     if (NowYear <2000)   
16     NowYear=1900+NowYear;   
17     Today = null;   
18     Hourleft = 23 - NowHour   
19     Minuteleft = 59 - NowMinute   
20     Secondleft = 59 - NowSecond   
21     Yearleft = year - NowYear   
22     Monthleft = 12 - NowMonth - 1 
23     Dateleft = 31 - NowDate   
24     if (Secondleft<0)   
25     {   
26         Secondleft=60+Secondleft;   
27         Minuteleft=Minuteleft-1;   
28     }   
29     if (Minuteleft<0)   
30     {    
31         Minuteleft=60+Minuteleft;   
32         Hourleft=Hourleft-1;   
33     }   
34     if (Hourleft<0)   
35     {   
36         Hourleft=24+Hourleft;   
37         Dateleft=Dateleft-1;   
38     }   
39     if (Dateleft<0)   
40     {   
41         Dateleft=31+Dateleft;   
42         Monthleft=Monthleft-1;   
43     }   
44     if (Monthleft<0)   
45     {   
46         Monthleft=12+Monthleft;   
47         Yearleft=Yearleft-1;   
48     }   
49     Temp=Yearleft+'年, '+Monthleft+'月, '+Dateleft+'天, '+Hourleft+'小时, '+Minuteleft+'分, '+Secondleft+'秒';
50     document.form1.left.value=Temp;   
51     timerID = setTimeout("showtime()",1000);   
52     timerRunning = true;   
53 }   
54 var timerID = null;   
55 var timerRunning = false;   
56 function stopclock () {   
57     if(timerRunning)   
58     clearTimeout(timerID);   
59     timerRunning = false;   
60 }   
61 function startclock () {   
62     stopclock();   
63     showtime();   
64 }   
65 // -->   
66 </script>

2. 小时倒计时（如：距离结束还有 42 分 5 秒）

 1 <script type="text/javascript">   
 2 <!--   
 3 //一个小时，按秒计算，可以自己调整时间
 4 var maxtime = 60*60 
 5 function CountDown()
 6 {   
 7     if(maxtime>=0)
 8     {   
 9         minutes = Math.floor(maxtime/60);   
10         seconds = Math.floor(maxtime%60);   
11         msg = "距离结束还有 "+minutes+" 分 "+seconds+" 秒";   
12         document.all["timer"].innerHTML=msg;   
13         if(maxtime == 5*60) alert('注意，还有5分钟!');   
14         --maxtime;   
15     }   
16     else
17     {   
18         clearInterval(timer);   
19         alert("时间到，结束!");   
20     }   
21 }   
22 timer = setInterval("CountDown()",1000);   
23 //-->   
24 </script>

3. 最简倒计时（如：现在离 2014 还有: 30 天） 

 1 <script Language="JavaScript">    
 2 <!-- Begin    
 3 　　var timedate= new Date("January 14,2012");    
 4 　　var times="2012";    
 5 　　var now = new Date();    
 6 　　var date = timedate.getTime() - now.getTime();    
 7 　　var time = Math.floor(date / (1000 * 60 * 60 * 24));    
 8 　　if (time >= 0) ;   
 9 document.write("<p>现在离 "+times+" 还有: <b>"+time +"</b> 天</p>");   
10 // End -->   
11 </script>

4. 秒表功能（如：00:01:11:00）

 1 <script type="text/javascript">   
 2 var normalelapse = 100;   
 3 var nextelapse = normalelapse;   
 4 var counter;    
 5 var startTime;   
 6 var start = clock.innerText;    
 7 var finish = "00:00:00:00";   
 8 var timer = null;   
 9 // 开始运行   
10 function run() {   
11     startB.disabled = true;   
12     endB.disabled = false;   
13     counter = 0;   
14     // 初始化开始时间   
15     startTime = new Date().valueOf();   
16     
17     // nextelapse是定时时间, 初始时为100毫秒   
18     // 注意setInterval函数: 时间逝去nextelapse(毫秒)后, onTimer才开始执行   
19     timer = window.setInterval("onTimer()", nextelapse);    
20 }   
21 // 停止运行   
22 function stop() {   
23     startB.disabled = false;   
24     endB.disabled = true;   
25     window.clearTimeout(timer);   
26 }   
27 window.onload = function() {   
28     endB.disabled = true;   
29 }   
30 // 倒计时函数   
31 function onTimer()   
32 {   
33     if (start == finish)   
34     {   
35         window.clearInterval(timer);   
36         alert("time is up!");   
37         return;   
38     }   
39     var hms = new String(start).split(":");   
40     var ms = new Number(hms[3]);   
41     var s = new Number(hms[2]);   
42     var m = new Number(hms[1]);   
43     var h = new Number(hms[0]);   
44     ms -= 10;   
45     if (ms < 0)   
46     {   
47         ms = 90;   
48         s -= 1;   
49         if (s < 0)   
50         {   
51             s = 59;   
52             m -= 1;   
53         }   
54         if (m < 0)   
55         {   
56             m = 59;   
57             h -= 1;   
58         }   
59     }   
60     var ms = ms < 10 ? ("0" + ms) : ms;   
61     var ss = s < 10 ? ("0" + s) : s;   
62     var sm = m < 10 ? ("0" + m) : m;   
63     var sh = h < 10 ? ("0" + h) : h;   
64     start = sh + ":" + sm + ":" + ss + ":" + ms;   
65     clock.innerText = start;   
66 
67     // 清除上一次的定时器   
68     window.clearInterval(timer);   
69     // 自校验系统时间得到时间差, 并由此得到下次所启动的新定时器的时间nextelapse   
70     counter++;    
71     var counterSecs = counter * 100;   
72     var elapseSecs = new Date().valueOf() - startTime;   
73     var diffSecs = counterSecs - elapseSecs;   
74     nextelapse = normalelapse + diffSecs;   
75     diff.value = counterSecs + "-" + elapseSecs + "=" + diffSecs;   
76     next.value = "nextelapse = " + nextelapse;   
77     if (nextelapse < 0) nextelapse = 0;   
78     // 启动新的定时器   
79     timer = window.setInterval("onTimer()", nextelapse);    
80 }   
81 </script>

原文网址：http://www.nowamagic.net/librarys/veda/detail/421

标签：

相关文章