这个案例只做了按钮模块 没有关于表单 实现功能是 点击按钮之后禁用 三秒倒计时结束后 则按钮恢复原来状态 定时器清楚 类似一般常见的获取验证码
思路:先让按钮设置 点击之后禁用 再写定时器倒计时
如果觉得定时器里的if判断复杂 可以先让按钮禁用之后 写个定时器自减 实现倒计时效果 实现之后再进行判断 为0的时候怎么怎么
<body>
<input type="text">
<button>发送</button>
<script>
var btn = document.querySelector('button');
var times = 3;
btn.addEventListener('click', function() {
btn.disabled = true; //按钮禁用
// setInterval(function() {
// btn.innerHTML = '还剩' + times + '秒';
// times--;
// }, 1000)
var clear = setInterval(function() {
if (times == 0) { //当定时器时间为0的时候
times = 3;
btn.disabled = false; //解除按钮禁用
btn.innerHTML = '发送';
clearInterval(clear) //清除定时器
} else {
btn.innerHTML = '还剩' + times + '秒';
times--; //自减
}
}, 1000)
})
</script>
</body>