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 相关文章推荐
IE iframe的onload方法分析小结
Jan 07 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
JsChart组件使用详解
Mar 04 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 Javascript
谈谈node.js中的模块系统
Sep 01 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下保存远程图片到本地的办法
2010/08/08 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
javascript里的条件判断
2007/02/27 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
python程序需要编译吗
2020/06/19 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
汉语专业应届生求职信
2013/10/01 职场文书
采购部岗位职责
2013/11/24 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
诉讼授权委托书
2014/10/15 职场文书
死亡诗社观后感
2015/06/05 职场文书
信用卡工资证明范本
2015/06/19 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
2019年入党思想汇报
2019/03/25 职场文书
openstack中的rpc远程调用的方法
2021/07/09 Python
python blinker 信号库
2022/05/04 Python