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 相关文章推荐
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
JS实现小星星特效
Dec 24 Javascript
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
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更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
原生js开发的日历插件
2017/02/04 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
对python中UDP,socket的使用详解
2019/08/22 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
大专学生推荐信范文
2013/11/19 职场文书
公司董事长职责
2013/12/12 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
音乐学专业求职信
2014/07/22 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js