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 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
vue router返回到指定的路由的场景分析
Nov 10 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+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
javascript几个易错点记录
2014/11/26 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
python批量生成本地ip地址的方法
2015/03/23 Python
不可错过的十本Python好书
2017/07/06 Python
Django中使用Celery的教程详解
2018/08/24 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
Python单元和文档测试实例详解
2019/04/11 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
Python super()方法原理详解
2020/03/31 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
JPA面试常见问题
2016/11/14 面试题
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
成人毕业生自我鉴定
2013/10/18 职场文书
担保书怎么写
2014/04/01 职场文书
土建工程师岗位职责
2014/06/10 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL
如何在Python中妥善使用进度条详解
2022/04/05 Python