点击获取验证码效果

Posted 好吗?好的

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了点击获取验证码效果相关的知识,希望对你有一定的参考价值。

 1 var Btn = document.getElementById(‘btn‘);
 2         var star = 10;
 3 
 4         Btn.onclick = function(){
 5             var timer = setInterval(function(){
 6                 star--;
 7                 Btn.disabled = true;
 8                 Btn.innerhtml = "重新发送验证码" + "(" + star + ")";
 9                 console.log(star);
10                 if(star <= 0){
11                     Btn.innerHTML = "获取短信验证码";
12                     Btn.disabled = false;
13                     clearInterval(timer);
14                 }
15             }, 1000);
16         }

html:

<button type="button" id="btn">获取短信验证码</button>

  值得一提的是,button按钮的类型问题,button按钮的默认类型是submit类型,如果不指定具体的的button类型的话,就会默认为submit,这样点击时候就会刷新页面,导致效果重置

以上是关于点击获取验证码效果的主要内容,如果未能解决你的问题,请参考以下文章

js实现验证码倒计时效果

WPF做12306验证码点击效果

获取验证码倒计时优化 页面刷新实时倒计时

Jquery插件 防刷新倒计时 “点击获取验证码后60秒内禁止重新获取

JS实现验证码倒计时效果

获取验证码效果和后台代码