先找到总时长,为分钟数和秒数之和。
var countSum = parseInt(spanMinute.innerHTML) * 60 + parseInt(spanSecond.innerHTML);
点击了开始按钮,开始执行间隔执行函数,总时长开始减少,分钟和秒数都更新。当总时长为0的时候,间隔执行函数停止。开始按钮也不能再点击(button.disabled = "true")
知道总时长,分钟数和秒数的计算方法:
minuteNumber = Math.floor(countSum / 60);
secondNumber = countSum % 60;
函数节流:不是每一次点击都执行间隔执行函数,不然倒计时会越走越快,在间隔执行函数执行的过程中,点击了开始按钮,不能再执行间隔执行函数,所以每一次点击执行,都要清除间隔执行函数。
开始按钮用到了间隔执行函数,结束按钮也用到了间隔执行函数,所以这个间隔执行函数一开始要用一个全局变量俩接收。这样才能在不同的的地方使用这个变量。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒计时时钟</title>
<style>
body,
div {
margin: 0;
padding: 0;
}
#countdown {
width: 300px;
text-align: center;
margin: 10px auto;
padding: 20px 0;
}
span {
color: #000;
width: 80px;
line-height: 2;
background: #fbfbfb;
border: 2px solid #b4b4b4;
margin: 0 10px;
padding: 0 10px;
}
</style>
</head>
<body>
<div id="countdown">
<span>01</span>
分钟
<span>20</span>
秒
<input type="button" value="启动" />
<input type="button" value="暂停" />
</div>
<script>
// 开始按钮
var starButton = document.querySelector("input:nth-of-type(1)");
// 结束按钮
var endButton = document.querySelector("input:nth-of-type(2)");
// 分钟数节点
var spanMinute = document.querySelector("span:nth-of-type(1)");
// 秒数节点
var spanSecond = document.querySelector("span:nth-of-type(2)");
//定义 分钟数和秒数
var minuteNumber = 0;
var secondNumber = 0;
// 因为间隔执行函数在不同的地方被用到,所以先定义一个全局变量接收这个间隔执行函数
var intervalResult = setInterval;
// 先定义总时长,这样才能操作分钟数和秒数
var countSum =
parseInt(spanMinute.innerHTML) * 60 + parseInt(spanSecond.innerHTML);
// console.log(countSum);
// 点击了启动,间隔执行函数开始执行
// 但是不能每次点击都执行间隔执行函数,
// 所以先定义一个锁定状态,只有不锁定,才能执行间隔执行函数
starButton.onclick = function () {
// 不是每一次点击,间隔执行函数都要执行,
// 而是每一次点击之前,先关闭上一个间隔执行函数
clearInterval(intervalResult);
intervalResult = setInterval(() => {
// 总时间开始减少,分钟数,秒数更新
countSum--;
minuteNumber = Math.floor(countSum / 60);
secondNumber = countSum % 60;
// 分钟数前补0
if (minuteNumber < 10 && minuteNumber > 0) {
minuteNumber === "0" + minuteNumber;
}
// 秒数前补0
if (secondNumber < 10 && secondNumber > 0) {
secondNumber === "0" + secondNumber;
}
// 更新节点里面的数据
spanMinute.innerHTML = minuteNumber;
spanSecond.innerHTML = secondNumber;
// 当总时长为0的时候,暂停执行,并且启动这个按钮不能点击了
if (countSum === 0) {
clearInterval(intervalResult);
starButton.disabled = "true";
}
}, 1000);
};
// 点击了暂停,间隔实行函数停止
endButton.onclick = function () {
clearInterval(intervalResult);
};
</script>
</body>
</html>