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> |