动态显示倒计时天、时、分、秒，时间归零时触发调用函数，且函数只能调一次，时间归零时清除定时器

最新推荐文章于 2021-05-31 17:08:59 发布

web前端小渣渣

最新推荐文章于 2021-05-31 17:08:59 发布

阅读量1.4k

点赞数

分类专栏： javaScript 文章标签：倒计时定时器清除定时器

本文链接：https://blog.csdn.net/qq_42906156/article/details/100696882

版权

javaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先写一个定时器，倒计时十秒，时间归零时，清除定时器。

var countDownTime = 10
// 要清除定时器，就必须在用定时器的时候，定义一个变量来记录定时器的返回值
var setTime = setInterval(() => {
    countDownTime -= 1;
    console.log(countDownTime,"倒计时还有a秒");
    // 当时间为0时，do some things...,并清除定时器
    if (countDownTime==0) {
        console.log(countDownTime,"时间归零了")
        // do some things....
        // 要想清除定时器，必须定义命名定时器，这里命名为time
        clearInterval(setTime)
    }
}, 1000);

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
</head>

<body>
	<div id="time"></div>
	<script>
		var divDoc = document.getElementById("time");
		// endTime由后端接口返回时间戳，这里以当前时间加10秒为例
		var endTime = new Date().getTime() + 1000 * 10;
		// 这里nowTime通过new Date()获取的是电脑显示的当前时间，这里可通过后端接口获取服务器时间，更稳妥。
		var nowTime = new Date().getTime();
		var countDownTime = endTime - nowTime >= 0 ? endTime - nowTime : 0;
		// 页面第一次显示倒计时间
		divDoc.innerText = "倒计时：" + getCountDownTime(countDownTime);
		var setTime = setInterval(() => {
			nowTime += 1000;
			countDownTime = endTime - nowTime >= 0 ? endTime - nowTime : 0;
			divDoc.innerText = "倒计时：" + getCountDownTime(countDownTime);
			if (countDownTime == 0) {
				doSomeThings();
				clearInterval(setTime);
			}
		}, 1000);
		// 将倒计的时间戳换算成天、时、分、秒
		function getCountDownTime(time) {
			let day = Math.floor(time / (24 * 60 * 60 * 1000));
			let hour = Math.floor((time % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
			let minute = Math.floor(((time % (24 * 60 * 60 * 1000)) % (60 * 60 * 1000)) / (60 * 1000));
			let second = Math.floor((((time % (24 * 60 * 60 * 1000)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000);
			return day + "天" + hour + "时" + minute + "分" + second + "秒";
		};

		function doSomeThings() {
			console.log("倒计时时间到!");
            alert('I love you')
		};

	</script>
</body>

</html>

web前端小渣渣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
动态显示倒计时天、时、分、秒，时间归零时触发调用函数，且函数只能调一次，时间归零时清除定时器

先写一个定时器，倒计时十秒，时间归零时，清除定时器。var countDownTime = 10// 要清除定时器，就必须在用定时器的时候，定义一个变量来记录定时器的返回值var setTime = setInterval(() => { countDownTime -= 1; console.log(countDownTime,"倒计时还有a秒"); /...
复制链接

扫一扫