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 17 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
浅入深出Vue之组件使用
Jul 11 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字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
学习JavaScript设计模式(接口)
2015/11/26 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
js模糊查询实例分享
2016/12/26 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
H5手机端多文件上传预览插件
2017/04/21 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
python实现的一个火车票转让信息采集器
2014/07/09 Python
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
Python反转序列的方法实例分析
2018/03/21 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
勤奋学习演讲稿
2014/05/10 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
2015年测量员工作总结
2015/05/23 职场文书
何玥事迹观后感
2015/06/16 职场文书
意外事故赔偿协议书
2016/03/22 职场文书