JavaScript实现10秒后再次获取验证码
2020-12-09 04:07
1976 查看
JavaScript网页制作–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>
页面预加载后出现获取验证码的按钮
按下获取验证码的按钮后,按钮禁用,倒计时,计时结束后恢复
这个程序看起来不是很难,但是在自己写的时候对于刚接触语言的同学们来说,逻辑的实现还是得好好想一想。
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:相关文章推荐
- 用JavaScript实现获取验证码(模仿百度搜索框样式)
- JS按钮获取验证码,60秒后才能再次获取实现
- JavaScript实现Class增删获取判断操作!
- Jquery插件实现点击获取验证码后60秒内禁止重新获取
- AngularJS 实现点击按钮获取验证码功能实例代码
- Android实现获取验证码效果
- 实现通用 Web CAPTCHA 图形验证码 JavaScript 脚本 API 服务 (JavaScript 脚本动态页面引用) 完整代码
- Android实现获取验证码效果
- JavaScript和jQuery获取input框的绝对位置实现方法
- 用JavaScript实现动态获取当前时间并刷新
- js实现获取验证码
- Jquery插件实现“点击获取验证码后60秒内禁止重新获取(防刷新)”
- 原生javascript实现获取指定元素下所有后代元素的方法
- javascript中获取class的简单实现
- javascript实现获取浏览器版本、浏览器类型
- spring boot中如何实现在手机注册和登录时获取验证码(阿里短信服务)
- javascript通过获取html标签属性class实现多选项卡的方法
- jsp+JavaScript 实现简单的验证码登录
- 参考了一些获取验证码的方式,再次封装一下获取验证码按钮,以及手机号码的正则处理
- jQuery获取验证码倒计时的实现