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 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
BootStrap中
Dec 10 Javascript
js querySelector() 使用方法
Dec 21 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
JavaScript代码简化技巧实例解析
Sep 09 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
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
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
深入php之规范编程命名小结
2013/05/15 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
python opencv实现运动检测
2018/07/10 Python
python学生管理系统学习笔记
2019/03/19 Python
python mysql中in参数化说明
2020/06/05 Python
浅析HTML5 Landmark
2020/09/11 HTML / CSS
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
大学毕业生通用自我评价
2014/01/05 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
原告离婚代理词
2015/05/23 职场文书
法制教育观后感
2015/06/17 职场文书
股权投资协议书
2016/03/23 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python