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

view source

 

print?

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>