0
点赞
收藏
分享

微信扫一扫

js发送短信验证码,点击按钮倒计时案例

mm_tang 2022-02-06 阅读 51

这个案例只做了按钮模块 没有关于表单 实现功能是 点击按钮之后禁用 三秒倒计时结束后 则按钮恢复原来状态 定时器清楚 类似一般常见的获取验证码

思路:先让按钮设置 点击之后禁用 再写定时器倒计时

<body>
<input type="text">
<button>发送</button>

<script>
var btn = document.querySelector('button');
var times = 3;
btn.addEventListener('click', function() {
btn.disabled = true; //按钮禁用
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>

 

举报

相关推荐

发送短信倒计时案例

验证码倒计时

0 条评论