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中的prototype和constructor简明总结
Apr 05 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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
Terran兵种对照表
2020/03/14 星际争霸
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
python 远程统计文件代码分享
2015/05/14 Python
Python实现遍历数据库并获取key的值
2015/05/17 Python
Python+django实现文件下载
2016/01/17 Python
Python实现定时任务
2017/02/08 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
python中for in的用法详解
2020/04/17 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
同学聚会欢迎辞
2014/01/14 职场文书
公证委托书格式
2014/09/13 职场文书
2014年教研组工作总结
2014/11/26 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js
Python使用永中文档转换服务
2022/05/06 Python