短信发送倒计时的几个细节
/* 1.对按钮进行事件注册绑定
2.利用定时器实现动态倒计时的后果
3.对倒计时归0时做出判断，如果等于0，清除定时器button内容换成发送，声明的时间总数复原
4.如果时间没有归0，则button内容显示还剩下多少秒，声明的time为time--
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发送短信倒计时</title>
</head>
<body>
<script>
window.onload = function () { //利用了BOM事件，可以写在编辑器任意一个地方
var btn = document.querySelector("button")
var time = 5
var timer = null
btn.addEventListener('click', function () {
timer = setInterval(function () {
if (time === 0) {
clearInterval(timer)
btn.disabled = false
btn.innerHTML = '发送'
time = 5
} else {
btn.innerHTML = `还剩下${time}秒`//使用了模板字符串
btn.disabled = true
time--
}
}, 1000)
})
}
</script>
<input type="number"> <button>发送</button>
</body>
</html>