1.定时器
html和JavaScript代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn" onclick="onBtn()">开始倒计时</button>
<script>
var count = 10;
//定义变量,来控制计时器的添加
var time = true;
console.log(time);
function onBtn(){
if(time){
var timer = setInterval(function(){
//让倒计时在button里面显示
document.querySelector('#btn').innerHTML = --count;
//判断倒计时是否结束
if(count === 0)
{
//倒计时结束就清除定时器
clearInterval(timer);
//倒计时结束修改按钮内容
document.querySelector('#btn').innerHTML = '重新开始倒计时';
count = 10;
time =true;
}
},1000)
time=false;
}else{
return false;
}
}
</script>
</body>
</html>