JavaScript实现一定时长下点击次数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="time">
倒计时：<span>60</span>
</div>
<div class="clickNum">
点击次数：<span>0</span>
</div>
<button class="btnClick">点击</button>
<button class="btnReset">重置</button>
<script>
var timer = null,//计时器id
duration = 60,//倒计时时长
frequency = 0;//点击次数
var time = document.querySelector(".time span");
var clickNum = document.querySelector(".clickNum span");
var btnClick = document.querySelector(".btnClick");
var btnReset = document.querySelector(".btnReset");
btnClick.onclick = function () {
if (frequency === 0) { //第一次点击开始计时
startTime();
}
if(duration === 0){//倒计时为0
return;
}
frequency++;
clickNum.innerText = frequency;//记录点击次数
}
btnReset.onclick = function(){
duration = 60;
frequency = 0;
clickNum.innerText = frequency;//点击次数重置为0
time.innerText = duration;//倒计时长重置为60;
clearInterval(timer);//清除计时器
timer = null;
}
//开始计时
function startTime() {
if (timer) { //计时器有值，返回
return;
}
timer = setInterval(function () {
duration--;
time.innerText = duration;
if(duration === 0){
clearInterval(timer);
timer = null;
}
}, 30);
}
</script>
</body>
</html>
效果展示：
