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 相关文章推荐
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
JavaScript String 对象常用方法详解
May 13 Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
js装饰设计模式学习心得
Feb 17 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
模板引擎正则表达式调试小技巧
2011/07/20 PHP
PHP引用返回用法示例
2016/05/28 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
查询json的数据结构的8种方式简介
2014/03/10 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
Python堆排序原理与实现方法详解
2018/05/11 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
python用requests实现http请求代码实例
2019/10/31 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
拾金不昧的表扬信
2014/01/16 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
面试必备的求职信
2014/05/25 职场文书
单位单身证明样本
2014/10/11 职场文书
创建文明城市倡议书
2015/04/28 职场文书
英文辞职信范文
2015/05/13 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python
python四种出行路线规划的实现
2021/06/23 Python
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技