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 相关文章推荐
一些实用的jQuery代码片段收集
Jul 12 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
canvas的神奇用法
Feb 03 Javascript
浅谈Vue.js
Mar 02 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
vue实现树形菜单效果
Mar 19 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
浅谈js闭包理解
Apr 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 获得汉字拼音首字母的函数
2009/08/01 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
学习php分页代码实例
2013/10/24 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
python实现感知器
2017/12/19 Python
Python的argparse库使用详解
2018/10/09 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
pandas的qcut()方法详解
2019/07/06 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
win10安装python3.6的常见问题
2020/07/01 Python
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
幼儿园大班新学期寄语
2014/01/18 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
事业单位个人总结
2015/02/12 职场文书
致运动员的广播稿
2015/08/19 职场文书
导游词之包公祠
2019/11/25 职场文书
JavaScript异步操作中串行和并行
2021/11/20 Javascript