案例:发送短信倒计时
点击按钮后,该按钮60秒之内不能再次点击,防止重复发送短信。
动图展示:
代码展示:
<p>案例:发送短信倒计时</p>
手机号码: <input type="number"> <button>获取验证码</button>
<script>
var btn = document.querySelector('button');
// 全局变量,定义剩下的秒数
var time = 59;
// 注册单击事件
btn.addEventListener('click', function () {
// 禁用按钮
btn.disabled = true;
// 开启定时器
var timer = setInterval(function () {
// 判断剩余秒数
if (time == 0) {
// 清除定时器和复原按钮
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '获取验证码';
} else {
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
}, 1000);
});
</script>