js实现点击获取验证码倒计时效果(发送验证码时使用)

June 06, 2018 16:32
访问量:158
摘要:可以应用于需要发送手机短信的地方,前端加上时间的限制,防止恶意点击。
<input type="button" style="height:32px;width:120px;" value="点击发送验证码" onclick="sendCode(this)" />

<script type="text/javascript">
 var clock = '';
 var nums = 10;
 var btn;
 function sendCode(thisBtn) {
   btn = thisBtn;
   btn.disabled = true; //将按钮置为不可点击
   btn.value = nums+'秒后可重新获取';
   clock = setInterval(doLoop, 1000); //一秒执行一次
 }
 function doLoop() {
   nums--;
   if(nums > 0){
     btn.value = nums+'秒后可重新获取';
   }else{
    clearInterval(clock); //清除js定时器
    btn.disabled = false;
    btn.value = '点击发送验证码';
    nums = 10; //重置时间
   }
 }
</script>

评论

暂无相关评论,快来抢占沙发吧!
评论框离家出走了,点击找回!
昵称
邮箱
网站
昵称
邮箱
网站