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 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
JQuery autocomplete 使用手册
Apr 01 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
May 12 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
详解Vue的异步更新实现原理
Dec 22 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
php 日期时间处理函数小结
2009/12/18 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
php在window iis的莫名问题的测试方法
2013/05/14 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
Python设计模式之工厂模式简单示例
2018/01/09 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
什么是View State?
2013/01/27 面试题
如何进行有效的自我评价
2013/09/27 职场文书
大学生工作推荐信范文
2013/12/02 职场文书
四年大学自我鉴定
2014/02/17 职场文书
春节请假条
2014/04/11 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
Python合并pdf文件的工具
2021/07/01 Python
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
spring boot中nativeQuery的用法
2021/07/26 Java/Android