先写一个定时器,倒计时十秒,时间归零时,清除定时器。
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>