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 相关文章推荐
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 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加密解密的代码
2007/07/16 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
ExtJS下grid的一些属性说明
2009/12/13 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
Python中apply函数的用法实例教程
2014/07/31 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
python如何从键盘获取输入实例
2020/06/18 Python
python如何代码集体右移
2020/07/20 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
长辈证婚人证婚词
2014/01/09 职场文书
学校卫生检查制度
2014/02/03 职场文书
2014社区三八妇女节活动方案
2014/03/30 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
2015大学迎新标语
2015/07/16 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
swagger如何返回map字段注释
2021/07/03 Java/Android
Vue3.0 手写放大镜效果
2021/07/25 Vue.js