js验证码重新发送倒计时效果
分类:实例代码
大家可能在生活中都有这样的精力,那就是某个网站需要进行验证码验证。
当点击按钮之后,按钮就处于不可用倒计时状态,当然完整的功能需要结合后台实现,不过这里只介绍一下前台是如何实现的。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>前端教程网</title> <script type="text/javascript"> var countdown=60; function settime(val) { if (countdown == 0) { val.removeAttribute("disabled"); val.value="免费获取验证码"; countdown = 60; } else { val.setAttribute("disabled", true); val.value="重新发送(" + countdown + ")"; countdown--; } setTimeout(function() { settime(val) },1000) } window.onload=function(){ var obt=document.getElementById("btn"); obt.onclick=function(){ settime(this) } } </script> </head> <body> <input type="button" id="btn" value="免费获取验证码"/> </body> </html>
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu