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提交表单ajax查询实例代码
Oct 07 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
vue项目移动端实现ip输入框问题
Mar 19 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 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
索尼ICF-SW100收音机评测
2021/03/02 无线电
PHP的栏目导航程序
2006/10/09 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
javascript时间函数大全
2014/06/30 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
mpvue将vue项目转换为小程序
2018/09/30 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
从运行效率与开发效率比较Python和C++
2018/12/14 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
微博营销计划书
2014/01/10 职场文书
清洁工岗位职责
2014/01/29 职场文书
市场部岗位职责
2015/02/12 职场文书
个人党性分析总结
2015/03/05 职场文书
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python
nginx 配置指令之location使用详解
2022/05/25 Servers