JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2019/6/27 21:41:05
本文主要是介绍JS短信验证码倒计时功能的实现(没有验证码,只有倒计时),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1、功能描述
当用户想要获取验证码时,就点击 免费获取验证码 ,然后开始倒计时,倒计时期间按钮文字为剩余时间x秒,且不可按状态,倒计时结束后,按钮更改为点击重新发送。
2、分析
必须用到定时器。按钮点击后,在定时器内做出判断。倒计时60秒,到0结束。
3、代码实现:
重点介绍:定时器在进行下一次倒计时之前,一定要清除一下,这样的话保证下一次定时器倒计时是正常的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .send{ width:250px; margin:0 auto; } .send input{ display: block; width:200px; font:400 16px/30px "微软雅黑"; outline: none; border: none; } .send button{ height:30px; border: none; outline: none; font:400 16px/30px "微软雅黑"; text-align: center; } </style> <script type="text/javascript"> window.onload=function(){ var button=document.getElementsByTagName("button")[0]; button.innerText="免费获取验证码"; var timer=null; button.onclick=function(){ clearInterval(timer);//这句话至关重要 var time=6; var that=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> <div id="send"> <input type="text" name="in" id="in" value="" /><button></button> </div> </body> </html>
以上所述是小编给大家介绍的JS短信验证码倒计时功能的实现(没有验证码,只有倒计时),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对找一找教程网网站的支持!
这篇关于JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南