生活中，我们接收短信验证码时的时候，常常会有倒计时。点击发送短信时候，按钮处会出现倒计时，我们可以用以下代码实现。
<!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>发送短信倒计时</title>
</head>
<style>
input {
width: 300px;
height: 30px;
border-radius: 5px 0px 0px 5px;
}
button,
input {
outline: 0;
border: 0;
}
button {
height: 35px;
width: 60px;
border-radius: 0px 5px 5px 0;
}
div {
width: 364px;
border: 1px solid rgb(221, 165, 165);
border-radius: 5px;
}
</style>
<body>
<!--
思路：
点完按钮，禁用disabled 为true
同时按钮里面的内容变化 butt修改on 里的内容通过innerHTML
里面秒数是有变化的，所以要用到定时器
定义一个变量，在定时器里，不断递减
如果变量为0,说明到了时间，我们需要停止定时器 并且复原按钮初始状态
-->
请输入手机号码:
<div>
<input type="number"><button>发送</button>
</div>
<script>
function message() {
var btn = document.querySelector('button');
var timer = 5; //定义剩下的秒数
btn.addEventListener('click', function () {
btn.disabled = true;
//把 btn.innerHTML= `还剩下${timer}秒`放入定时器;
var time = setInterval(function () {
if (timer == 0) {
//清除定时器 复原按钮
clearInterval(time);
btn.disabled = false;
btn.innerHTML = '发送';
timer = 5;
} else {
btn.innerHTML = `还剩${timer}秒`;
timer--;
}
}, 1000)
})
}
message()
</script>
</body>
</html>
