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 相关文章推荐
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 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/04 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
Python imread、newaxis用法详解
2019/11/04 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
车间操作工岗位职责
2013/12/19 职场文书
青年教师培训方案
2014/02/06 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
团队激励口号
2014/06/06 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
社区端午节活动总结
2015/02/11 职场文书
培训师岗位职责
2015/02/14 职场文书
2015年化验员工作总结
2015/04/10 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书