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 相关文章推荐
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
vue v-on监听事件详解
May 17 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
使用 vue-i18n 切换中英文效果
May 23 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 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(1)
2006/10/09 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
浅谈Javascript面向对象编程
2011/11/15 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
基于python 二维数组及画图的实例详解
2018/04/03 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
中职生自我鉴定范文
2013/10/03 职场文书
入党积极分子思想汇报
2014/01/02 职场文书
拓展培训心得体会
2014/01/04 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
骨干教师考核评语
2014/12/31 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
如何利用python实现Simhash算法
2022/06/28 Python