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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
javascript getElementsByTagName
Jan 31 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
vue.extend与vue.component的区别和联系
Sep 19 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
js回调函数仿360开机
Dec 26 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
js 图片轮播(5张图片)
2008/12/30 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
生物化工工艺专业应届生求职信
2013/10/08 职场文书
教师的实习自我鉴定
2013/12/17 职场文书
党员承诺书内容
2014/03/26 职场文书
委托公证书范本
2014/04/03 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
室外天线与收音机天线杆接合方法
2022/04/05 无线电