JavaScript 实现倒计时代码

最新推荐文章于 2023-02-11 10:27:46 发布

我的世界只有零一

最新推荐文章于 2023-02-11 10:27:46 发布

阅读量1.5k

点赞数 1

文章标签： JavaScript 实现倒计时代码

本文链接：https://blog.csdn.net/m0_37810705/article/details/62214924

版权

以下是使用 JavaScript 实现页面动态倒计时的代码：

1. 定义一个 CountDown() 函数计算天、时、分、秒；

2. 使用 setInterval 对 CountDown() 函数进行调用；

3. 计时结束时使用 clearInterval 停止调用；

由于在页面完全加载后的一秒才会调用 CountDown() 函数，所以可根据自身要求加上 “window.onload = CountDown;” ，在页面刚加载完就调用此方法，可去除一秒误差。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript 实现倒计时</title>
<script type="text/javascript">
	var totalTime = 60 * 60 * 24 * 1;	// 倒计时总时间，以秒为单位
	function CountDown() {
		if (totalTime >= 0) {
			seconds = Math.floor(totalTime % 60);	// 秒
			minutes = Math.floor(totalTime / 60 % 60);	// 分
			hour = Math.floor(totalTime / 60 / 60 % 24);	// 时
			day = Math.floor(totalTime / 60 / 60 / 24);	// 天
			timerMsg = "距离活动结束还有：" + 
				(day >= 10 ? day : "0" + day) + "天" + 
				(hour >= 10 ? hour : "0" + hour) + "时" + 
				(minutes >= 10 ? minutes : "0" + minutes) + "分" + 
				(seconds >= 10 ? seconds : "0" + seconds) + "秒";
			document.all["timer"].innerHTML = timerMsg;
			if (totalTime == 5 * 60) {
				alert('注意，还有5分钟!');
			}
			-- totalTime;
		} else {
			clearInterval(timer);	// 停止调用函数
			alert("时间到，计时结束!");
		}
	}
	timer = setInterval("CountDown()", 1000);	// 以毫秒为单位，每 1 秒调用一次 CountDown()
	// window.onload = CountDown;	// 页面刚加载完就开始计时
</script>
</head>
<body>
	<div id="timer" style="color:red; font-weight:bold;">倒计时马上开始……</div>
</body>
</html>