A-A+

JS倒计时代码大全

2012年12月05日 JavaScript 评论 2 条 阅读 4,015 次

1.世界末日倒计时

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

2.小时倒计时，可用于在线考试

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<SCRIPT LANGUAGE="JavaScript">
    <!--
    var maxtime = 60 * 60 //一个小时，按秒计算，自己调整!  
    function CountDown() {
        if (maxtime >= 0) {
            minutes = Math.floor(maxtime / 60);
            seconds = Math.floor(maxtime % 60);
            msg = "距离结束还有" + minutes + "分" + seconds + "秒";
            document.getElementById("timer").innerHTML = msg;
            if (maxtime == 5 * 60) alert('注意，还有5分钟!');
            --maxtime;
        }
        else {
            clearInterval(timer);
            alert("时间到，结束!");
        }
    }
    timer = setInterval("CountDown()", 1000);
    //-->  
</SCRIPT>
<div id="timer" style="color:red"></div>  

3.简单倒计时（仅显示天数）

XHTML
1
2
3
4
5
6
7
8
9
<Script Language="JavaScript">
    var timedate = new Date("January 14,2013");
    var times = "研究生考试";
    var now = new Date();
    var date = timedate.getTime() - now.getTime();
    var time = Math.floor(date / (1000 * 60 * 60 * 24));
    if (time >= 0) ;
    document.write("<li><font color=#DEDBDE>现在离2013年" + times + "还有: <font color=red><b>" + time + "</b></font> 天</font></li>");
</Script>  

4.复杂版倒计时，带毫秒

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<script language="JavaScript" type="text/javascript">
    function djs() {
        var urodz = new Date("11/12/2008");
        var now = new Date();
        var num
        var ile = urodz.getTime() - now.getTime();
        var dni = Math.floor(ile / (1000 * 60 * 60 * 24));
        if (dni > 1)
            num = dni + 1
        else
        if (dni == 1)
            num = 2
        else
        if (dni == 0)
            num = 1
        else
            num = 0
        document.write(num)
    }
</script>
 
距某某开幕式还有 [
<script language="JavaScript" type="text/javascript">djs()</script>] 天
第五个：Javascript倒计时器 - 采用系统时间自校验
这次利用系统时间自校验倒计时, 无需手工调校使得倒计时更为精确, 代码及详细注释如下:
 
<span id="clock">00:01:11:00</span>
<input id="startB" type="button" value="start countdown!" onclick="run()">
<input id="endB" type="button" value="stop countdown!" onclick="stop()">
<br>
<input id="diff" type="text">
<input id="next" type="text">
<script language="Javascript">
    /* This notice must be untouched at all times.
    
    countdown.js    v. 1.0
    The latest version is available at
    http://blog.csdn.net/yjgx007
    
    Copyright (c) 2004 Xinyi.Chen. All rights reserved.
    Created 7/30/2004 by Xinyi.Chen.  
    Web: http://blog.csdn.net/yjgx007
    E-Mail: chenxinyi1978@hotmail.com
    Last modified: 7/30/2004
    
    This program is free software;
    you can redistribute it and/or modify it under the terms of the
    GNU General Public License as published by the Free Software Foundation;
    
    See the GNU General Public License
    at http://www.gnu.org/copyleft/gpl.html for more details.
    */
    var normalelapse = 100;
    var nextelapse = normalelapse;
    var counter;
    var startTime;
    var start = clock.innerText;
    var finish = "00:00:00:00";
    var timer = null;
 
    // 开始运行  
    function run() {
        startB.disabled = true;
        endB.disabled = false;
        counter = 0;
// 初始化开始时间  
        startTime = new Date().valueOf();
 
// nextelapse是定时时间, 初始时为100毫秒  
// 注意setInterval函数: 时间逝去nextelapse(毫秒)后, onTimer才开始执行  
        timer = window.setInterval("onTimer()", nextelapse);
    }
 
    // 停止运行  
    function stop() {
        startB.disabled = false;
        endB.disabled = true;
        window.clearTimeout(timer);
    }
 
    window.onload = function () {
        endB.disabled = true;
    }
 
    // 倒计时函数  
    function onTimer() {
 
        if (start == finish) {
            window.clearInterval(timer);
            alert("time is up!");
            return;
        }
 
        var hms = new String(start).split(":");
        var ms = new Number(hms[3]);
        var s = new Number(hms[2]);
        var m = new Number(hms[1]);
        var h = new Number(hms[0]);
 
        ms -= 10;
        if (ms < 0) {
            ms = 90;
            s -= 1;
            if (s < 0) {
                s = 59;
                m -= 1;
            }
 
            if (m < 0) {
                m = 59;
                h -= 1;
            }
        }
 
        var ms = ms < 10 ? ("0" + ms) : ms;
        var ss = s < 10 ? ("0" + s) : s;
        var sm = m < 10 ? ("0" + m) : m;
        var sh = h < 10 ? ("0" + h) : h;
 
        start = sh + ":" + sm + ":" + ss + ":" + ms;
        clock.innerText = start;
 
// 清除上一次的定时器  
        window.clearInterval(timer);
 
// 自校验系统时间得到时间差, 并由此得到下次所启动的新定时器的时间nextelapse  
        counter++;
        var counterSecs = counter * 100;
        var elapseSecs = new Date().valueOf() - startTime;
        var diffSecs = counterSecs - elapseSecs;
        nextelapse = normalelapse + diffSecs;
        diff.value = counterSecs + "-" + elapseSecs + "=" + diffSecs;
        next.value = "nextelapse = " + nextelapse;
        if (nextelapse < 0) nextelapse = 0;
 
// 启动新的定时器  
        timer = window.setInterval("onTimer()", nextelapse);
    }
</script>

标签：

2 条留言  访客：2 条  博主：0 条

  1. avatar 美白点滴 2012年12月05日 下午 4:20  -49楼  回复

    .

  2. avatar 我要发芽 2012年12月08日 下午 5:10  -48楼  回复

    不错，谢谢分享~

给我留言