JavaScript倒计时脚本

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

1. 比较长时间的倒计时

离2015年还有：

01
<script type="text/javascript">  

02
startclock();

03
var timerID = null;  

04
var timerRunning = false;  

05
function 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=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. 小时倒计时（短时间倒计时）

距离结束还有 59 分 21 秒

01
<script type="text/javascript">  

02
<!--  

03
//一个小时，按秒计算，可以自己调整时间

04
var maxtime = 60*60

05
function 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
}  

22
timer = 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) ;  

09
document.write("<p>现在离 "+times+" 还有: <b>"+time +"</b> 天</p>");  

10
// End -->  

11
</script>

4. 秒表功能

00:01:11:00

01
<script type="text/javascript">  

02
var normalelapse = 100;  

03
var nextelapse = normalelapse;  

04
var counter;   

05
var startTime;  

06
var start = clock.innerText;   

07
var finish = "00:00:00:00";  

08
var timer = null;  

09
// 开始运行  

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>