js实现点击获取验证码倒计时效果


Posted in Javascript onJanuary 28, 2021

网站中为了防止恶意获取验证短信、验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果。实现这个功能,一个setInterval和一个clearInterval就能搞定了,不需要太多的代码。实例效果和代码如下:

js实现点击获取验证码倒计时效果

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<input type="button" style="height:32px;width:120px;" value="点击发送验证码" onclick="sendCode(this)" />
<script type="text/javascript">
 var clock = '';
 var nums = 10;
 var btn;
 function sendCode(thisBtn)
 { 
 btn = thisBtn;
 btn.disabled = true; //将按钮置为不可点击
 btn.value = nums+'秒后可重新获取';
 clock = setInterval(doLoop, 1000); //一秒执行一次
 }
 function doLoop()
 {
 nums--;
 if(nums > 0){
 btn.value = nums+'秒后可重新获取';
 }else{
 clearInterval(clock); //清除js定时器
 btn.disabled = false;
 btn.value = '点击发送验证码';
 nums = 10; //重置时间
 }
 }
</script>

更多关于倒计时的文章请查看专题:《倒计时功能》

利用setInterval和clearIntervaljs实现js点击获取验证码倒计时效果,希望对大家的学习有所帮助。

Javascript 相关文章推荐
js的一些常用方法小结
Jun 29 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
vue this.reload 方法 配置
Sep 12 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 #Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 #Javascript
jQuery+Ajax实现无刷新分页
Oct 30 #Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 #Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 #Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 #Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 #Javascript
You might like
PHP批量生成图片缩略图的方法
2015/06/18 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
javascript 拖动表格行实现代码
2011/05/05 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
Python查看多台服务器进程的脚本分享
2014/06/11 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
python交互式图形编程实例(一)
2017/11/17 Python
python3处理含有中文的url方法
2018/05/10 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
高级方案规划工程师岗位职责
2013/11/29 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
出差报告怎么写
2014/11/06 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
标枪加油稿
2015/07/22 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB