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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 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
php分页示例代码
2007/03/19 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
PHP实现简易图形计算器
2020/08/28 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
详解Bootstrap插件
2016/04/25 Javascript
requireJS使用指南
2016/04/27 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
python同时给两个收件人发送邮件的方法
2015/04/30 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
打包发布Python模块的方法详解
2016/09/18 Python
Django接收自定义http header过程详解
2019/08/23 Python
Python常用断言函数实例汇总
2020/11/30 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
追讨欠款律师函
2015/06/24 职场文书
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS