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 相关文章推荐
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
javaScript 计算两个日期的天数相差(示例代码)
Dec 27 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
JS开发常用工具函数(小结)
Jul 04 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 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操作数组相关函数
2011/02/03 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
Bootstrap table使用方法总结
2017/05/10 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
Python操作列表之List.insert()方法的使用
2015/05/20 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
自学python的建议和周期预算
2019/01/30 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
python tornado修改log输出方式
2019/11/18 Python
python循环输出三角形图案的例子
2019/11/22 Python
Python绘图实现显示中文
2019/12/04 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
数字漫画:comiXology
2020/06/13 全球购物
学校大课间活动方案
2014/01/30 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
2019个人半年工作总结
2019/06/21 职场文书
导游词之河北野三坡
2019/12/11 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers