JS 实现倒计时

JavaScript

利用 window.setInterval() 实现倒计时

示例：

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
var id;
var interval = 1000; 

/**
 * @param year 结束日期的年
 * @param month 结束日期的月
 * @param day 结束日期的日
 * @param divname 需做出响应的元素id
 */
function ShowCountDown(year,month,day,divname) { 
	// 设置结束日期
	var endDate = new Date(year, month-1, day); 
	// 获取当前日期
	var now = new Date(); 
	// 计算剩余毫秒数
	var leftTime=endDate.getTime()-now.getTime(); 
	// 计算剩余秒数
	var leftsecond = parseInt(leftTime/1000); 
	// 剩余天数（整数倍）
	var day1=Math.floor(leftsecond/(60*60*24)); 
	// 剩余小时数（除去大单位后整数倍）
	var hour=Math.floor((leftsecond-day1*24*60*60)/3600); 
	// 剩余分钟数（除去大单位后整数倍）
	var minute=Math.floor((leftsecond-day1*24*60*60-hour*3600)/60); 
	// 剩余秒数（除去大单位后整数倍）
	var second=Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60); 

	var cc = document.getElementById(divname); 
	cc.innerHTML = "距离" + year + "年" + month + "月" + day + "日还有：" + day1 + "天" + hour + "小时" + minute + "分" + second + "秒"; 
} 

/**
 * 开始倒计时
 */
function start(){
	id = window.setInterval( function() {

			ShowCountDown(2023,8,7,'divdown1');

		}, interval); 
}

/**
 * 停止倒计时
 */
function stop(){
	if (id) {
		window.clearInterval(id);
	}
}

window.setInterval() 注解

1. window.setInterval()

功能：
按照指定的周期（以毫秒计）来调用函数或计算表达式。
语法：
setInterval(code,millisec)
参数：
code: 在定时时间到时要执行的JavaScript代码串。
millisec: 设定的定时时间，用毫秒数表示。
返回值：
定时器的ID值，可用于clearInterval()方法停止指定的定时器。
注：
setInterval()方法会不停地调用函数，直到用clearInterval()终止定时或窗口被关闭。

2. window.clearInterval()

功能：
取消由 setInterval() 方法设置的定时器。
语法：
clearInterval(id_of_setinterval)
参数：
id_of_setinterval: 由 setInterval() 返回的 id 值。该值标识了一个 setInterval 定时器。
也就是：window.setInterval() 返回的就是 window.clearInterval() 的参数