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实现的表格分页实现代码
Jun 21 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
jquery图片切换实例分析
Apr 15 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 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动态生成VRML网页
2006/10/09 PHP
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
php中JSON的使用与转换
2015/01/14 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
domReady的实现案例
2016/11/23 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
js实现时间日期校验
2020/05/26 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
python encode和decode的妙用
2009/09/02 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
机械操作工岗位职责
2014/08/08 职场文书
财政局个人总结
2015/03/04 职场文书
大学班干部竞选稿
2015/11/20 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL