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天然的迭代器
Oct 29 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
小程序server请求微信服务器超时的解决方法
May 21 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
自动跳转中英文页面
2006/10/09 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
PHP7匿名类用法分析
2016/09/26 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
document.createElement()用法
2013/03/13 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
Vue AST源码解析第一篇
2017/07/19 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
Django开发中复选框用法示例
2018/03/20 Python
python批量获取html内body内容的实例
2019/01/02 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
Python socket聊天脚本代码实例
2020/01/02 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
奥巴马英文演讲稿
2014/05/15 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis