首页 > 代码库 > JavaScript倒计时脚本

JavaScript倒计时脚本

2024-07-31 17:13:04   218人阅读

JavaScript倒计时在Web中用得非常广泛，比如常见的团购啊、还有什么值得期待的事情，都可以用到倒计时。现在举了四个例子，比如时间长的倒计时，小时倒计时，最简的倒计时，还有秒表等等，应该可以满足大部分需求。郸城县殳海环保

1. 比较长时间的倒计时

离2015年还有：

 

 

01<script type="text/javascript">  
02startclock();
03var timerID = null;  
04var timerRunning = false;  
05function showtime() {  
06    Today = new Date();
07    var year = Today.getFullYear();
08    document.getElementById("next_yeat").innerHTML = year + 1;
09    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=http://www.mamicode.com/Temp;
51    timerID = setTimeout("showtime()",1000);  
52    timerRunning = true;  
53}  
54var timerID = null;  
55var timerRunning = false;  
56function stopclock () {  
57    if(timerRunning)  
58    clearTimeout(timerID);  
59    timerRunning = false;  
60}  
61function startclock () {  
62    stopclock();  
63    showtime();  
64}  
65// -->  
66</script>  

2. 小时倒计时（短时间倒计时）

距离结束还有 59 分 21 秒

01<script type="text/javascript">  
02<!--  
03//一个小时，按秒计算，可以自己调整时间
04var maxtime = 60*60
05function CountDown()
06{  
07    if(maxtime>=0)
08    {  
09        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}  
22timer = setInterval("CountDown()",1000);  
23//-->  
24</script>

3. 最简倒计时

现在离 2012 还有: -1028 天

01<script Language="JavaScript">   
02<!-- Begin   
03　　var timedate= new Date("January 14,2012");   
04　　var times="2012";   
05　　var now = new Date();   
06　　var date = timedate.getTime() - now.getTime();   
07　　var time = Math.floor(date / (1000 * 60 * 60 * 24));   
08　　if (time >= 0) ;  
09document.write("<p>现在离 "+times+" 还有: <b>"+time +"</b> 天</p>");  
10// End -->  
11</script>  

4. 秒表功能

00:01:11:00  

 

view source
 
print?
01<script type="text/javascript">  
02var normalelapse = 100;  
03var nextelapse = normalelapse;  
04var counter;   
05var startTime;  
06var start = clock.innerText;   
07var finish = "00:00:00:00";  
08var timer = null;  
09// 开始运行  
10function 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// 停止运行  
22function stop() {  
23    startB.disabled = false;  
24    endB.disabled = true;  
25    window.clearTimeout(timer);  
26}  
27window.onload = function() {  
28    endB.disabled = true;  
29}  
30// 倒计时函数  
31function 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 = http://www.mamicode.com/counterSecs + "-" + elapseSecs + "=" + diffSecs;  
76    next.value =http://www.mamicode.com/ "nextelapse = " + nextelapse;  
77    if (nextelapse < 0) nextelapse = 0;  
78    // 启动新的定时器  
79    timer = window.setInterval("onTimer()", nextelapse);   
80}  
81</script>

JavaScript倒计时脚本


联系
我们