用JS怎样完成间隔10秒载获取验证码的功能？
发布时间：2022-01-20 15:57:06 所属栏目：语言 来源：互联网
导读：对于验证码详细大家都不陌生，我们在登录或者注册页面，常能看到验证码。而我们在做验证码的时候要考虑到，获取验证码的时间间隔，因为如果不设置这个，那么就会出现短时间或者大量验证码的情况，对此这篇文章就给大家介绍用JS实现间隔10秒载获取验证码的功
|
对于验证码详细大家都不陌生，我们在登录或者注册页面，常能看到验证码。而我们在做验证码的时候要考虑到，获取验证码的时间间隔，因为如果不设置这个，那么就会出现短时间或者大量验证码的情况，对此这篇文章就给大家介绍用JS实现间隔10秒载获取验证码的功能，感兴趣的朋友就继续往下看吧。 功能实现： 1、点击获取验证码后禁用按钮 2、按钮中的文字内容改变，每一秒都改变 3、按钮倒计时变为0时恢复按钮，改回文字，重置倒计时t 代码实现： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>再次获取验证码</title> </head> <body> <input type="text"> <button>获取验证码</button> <script> var btn = document.querySelector('button'); var t = 10; //设置监听事件，按下按钮后禁用按钮 btn.addEventListener('click',function(){ btn.disabled = true; //添加定时器，时间间隔为一秒 var time = setInterval(function(){ if(t==0){//如果倒计时等于0了，清除计时器，恢复按钮，将t重置为10，否则按钮中文字改变，t递减。 clearInterval(time); btn.disabled=false; btn.innerHTML='获取验证码'; t=10; }else{ btn.innerHTML='您可以在'+t+'秒后再次获取'; t--; } }, 1000); }) </script> </body> </html> （编辑：烟台站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
