JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
1、功能描述
当用户想要获取验证码时,就点击免费获取验证码,然后开始倒计时,倒计时期间按钮文字为剩余时间x秒,且不可按状态,倒计时结束后,按钮更改为点击重新发送。
2、分析
必须用到定时器。按钮点击后,在定时器内做出判断。倒计时60秒,到0结束。
3、代码实现:
重点介绍:定时器在进行下一次倒计时之前,一定要清除一下,这样的话保证下一次定时器倒计时是正常的。
<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> *{margin:0;padding:0;} .send{ width:250px; margin:0auto; } .sendinput{ display:block; width:200px; font:40016px/30px"微软雅黑"; outline:none; border:none; } .sendbutton{ height:30px; border:none; outline:none; font:40016px/30px"微软雅黑"; text-align:center; } </style> <scripttype="text/javascript"> window.onload=function(){ varbutton=document.getElementsByTagName("button")[0]; button.innerText="免费获取验证码"; vartimer=null; button.onclick=function(){ clearInterval(timer);//这句话至关重要 vartime=6; varthat=this;//习惯 timer=setInterval(function(){ console.log(time); if(time<=0){ that.innerText=""; that.innerText="点击重新发送"; that.disabled=false; }else{ that.disabled=true; that.innerText=""; that.innerText="剩余时间"+(time)+"秒"; time--; } },1000); } } </script> </head> <body> <divid="send"> <inputtype="text"name="in"id="in"value=""/><button></button> </div> </body> </html>
以上所述是小编给大家介绍的JS短信验证码倒计时功能的实现(没有验证码,只有倒计时),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!