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技术实现的web小游戏(不含网游)
Jun 12 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
JavaScript window.location对象
Nov 14 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
详解async/await 异步应用的常用场景
May 13 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 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
编译问题
2006/10/09 PHP
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
php的curl封装类用法实例
2014/11/07 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
python从入门到精通(DAY 1)
2015/12/20 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
毕业生自我鉴定范文
2013/11/08 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
运动会入场词50字
2014/02/20 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
mysql的数据压缩性能对比详情
2021/11/07 MySQL
HttpClient实现文件上传功能
2022/08/14 Java/Android