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的面向对象和继承有利新手学习
Jan 11 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
微信小程序开发问题之wx.previewImage
Dec 25 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
浅析微信扫码登录原理(小结)
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
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
PHP中$_SERVER使用说明
2015/07/05 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
理解 JavaScript 预解析
2009/10/25 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
简单的三步vuex入门
2018/05/20 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
pyqt和pyside开发图形化界面
2014/01/22 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
使用Python实现牛顿法求极值
2020/02/10 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
教师简历自我评价
2014/02/03 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
车辆挂靠协议书
2016/03/23 职场文书
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers