JavaScript实现10秒后再次获取验证码


Posted in Javascript onDecember 02, 2020

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实现10秒后再次获取验证码

按下获取验证码的按钮后,按钮禁用,倒计时,计时结束后恢复

JavaScript实现10秒后再次获取验证码

这个程序看起来不是很难,但是在自己写的时候对于刚接触语言的同学们来说,逻辑的实现还是得好好想一想。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 Javascript
JavaScript实现网页跨年倒计时
Dec 02 #Javascript
JavaScript async/await原理及实例解析
Dec 02 #Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 #Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 #Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 #Vue.js
vue $router和$route的区别详解
Dec 02 #Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 #Vue.js
You might like
php操作csv文件代码实例汇总
2014/09/22 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
JQuery与iframe交互实现代码
2009/12/24 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
Python生成密码库功能示例
2017/05/23 Python
python的移位操作实现详解
2019/08/21 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
python实现logistic分类算法代码
2020/02/28 Python
如何使用Python调整图像大小
2020/09/26 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
应届大学生自荐信
2013/12/05 职场文书
大学生职业生涯规划范文
2014/01/08 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
小学教师自我评价
2015/03/04 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
Python如何使用循环结构和分支结构
2022/04/13 Python
Python 中面向接口编程
2022/05/20 Python
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle