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中String和StringBuffer的速度之争
Apr 01 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
vue v-model的用法解析
Oct 19 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/12/06 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
php微信支付接口开发程序
2016/08/02 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
PDO::exec讲解
2019/01/28 PHP
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
Python转码问题的解决方法
2008/10/07 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
Python生成密码库功能示例
2017/05/23 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
毕业生的自我鉴定
2013/10/29 职场文书
高级工程师岗位职责
2013/12/15 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
社区节水倡议书
2015/04/29 职场文书
担保书范文
2019/07/09 职场文书
Java 在线考试云平台的实现
2021/11/23 Java/Android
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python