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 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 Javascript
vue 动态表单开发方法案例详解
Dec 02 Javascript
axios封装与传参示例详解
Oct 18 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 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
论坛头像随机变换代码
2006/10/09 PHP
常用的php ADODB使用方法集锦
2008/03/25 PHP
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
php 地区分类排序算法
2013/07/01 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
js中的闭包学习心得
2018/02/06 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
幼儿园毕业典礼主持词
2014/03/21 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
读书活动总结
2014/04/28 职场文书
国贸专业求职信
2014/06/28 职场文书
事业单位聘任报告
2015/03/02 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书