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上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
vue移动端下拉刷新和上滑加载
Oct 27 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/06/09 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
python笔记(2)
2012/10/24 Python
Python设计模式之单例模式实例
2014/04/26 Python
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
Python 中 Meta Classes详解
2016/02/13 Python
python处理xml文件的方法小结
2017/05/02 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
市场开发计划书
2014/05/07 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
休学证明范本
2015/06/19 职场文书
老人与海读书笔记
2015/06/26 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android