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 相关文章推荐
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
jquery图片切换插件
Mar 16 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
js Dom实现换肤效果
Oct 21 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
公众号SVG动画交互实战代码
May 31 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的可变变量名的使用方法分享
2012/02/05 PHP
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
JS类的封装及实现代码
2009/12/02 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
vue中使用codemirror的实例详解
2018/11/01 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
Python实现Const详解
2015/01/27 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
精伦电子Java笔试题
2013/01/16 面试题
教师聘用意向书
2015/05/11 职场文书
北京爱情故事观后感
2015/06/12 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
开网店计划分析
2019/07/30 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
python调试工具Birdseye的使用教程
2021/05/25 Python