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 相关文章推荐
一些实用的jQuery代码片段收集
Jul 12 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
js清理Word格式示例代码
Feb 13 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
PHP开发的一些注意点总结
2010/10/12 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
YII中assets的使用示例
2014/07/31 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
js中的this关键字详解
2013/09/25 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
JavaScript对象原型链原理详解
2020/02/05 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
调试Python程序代码的几种方法总结
2015/04/28 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
Django 路由控制的实现
2019/07/17 Python
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
会计专业大学生职业生涯规划书
2014/02/11 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
MySQL系列之十一 日志记录
2021/07/02 MySQL
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫