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 相关文章推荐
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 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新手上路(五)
2006/10/09 PHP
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
React学习之JSX与react事件实例分析
2020/01/06 Javascript
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
Python基于property实现类的特性操作示例
2018/06/15 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
python实现代码统计器
2019/09/19 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
纽约海:Sea New York
2018/11/04 全球购物
寄语学生的话
2014/04/10 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
民主生活会剖析材料
2014/09/30 职场文书
2014年学习部工作总结
2014/11/12 职场文书
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js