JS 实现获取验证码 倒计时功能


Posted in Javascript onOctober 29, 2018

setInterval 一个定时器搞定

<style>
button{
  background: #45BCF9;
  color: #fff;
  padding: 4px 10px;
  border: none;
  outline: none;
  cursor: pointer;
}
button:hover{
  background: #00a8fe;
}
button.disabled{
  background: #000;
  cursor: auto;
}
button.disabled:hover{
  background: #000;
}
</style>
<button type="button" onclick="fn()">获取验证码</button>
<script>
function fn(){
  var oBtn = document.getElementsByTagName('button')[0];
  var time = 60;
  var timer = null;
  oBtn.innerHTML = time + '秒后重新发送';
  oBtn.setAttribute('disabled', 'disabled');  // 禁用按钮
  oBtn.setAttribute('class', 'disabled');   // 添加class 按钮样式变灰
  timer = setInterval(function(){
    // 定时器到底了 兄弟们回家啦
    if(time == 1){
      clearInterval(timer);       
      oBtn.innerHTML = '获取验证码';  
      oBtn.removeAttribute('disabled'); 
      oBtn.removeAttribute('class');  
    }else{
      time--;
      oBtn.innerHTML = time + '秒后重新发送';
    }
  }, 1000)
}
</script>

总结

以上所述是小编给大家介绍的JS 实现获取验证码 倒计时功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
浅析微信扫码登录原理(小结)
Oct 29 #Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 #Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 #Javascript
vue mounted 调用两次的完美解决办法
Oct 29 #Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 #Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 #Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 #Javascript
You might like
php密码生成类实例
2014/09/24 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
php防止sql注入的方法详解
2017/02/20 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
php实现简易计算器
2020/08/28 PHP
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
python基于queue和threading实现多线程下载实例
2014/10/08 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
自定义django admin model表单提交的例子
2019/08/23 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
教师年度考核自我鉴定
2014/01/19 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
个人借款担保书
2014/04/02 职场文书
单位消防安全责任书
2014/07/23 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
会计出纳岗位职责
2015/03/31 职场文书
经理岗位职责范本
2015/04/15 职场文书
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏
排查MySQL生产环境索引没有效果
2022/04/11 MySQL