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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 Javascript
angular异步验证器防抖实例详解
Mar 31 Javascript
vue中data里面的数据相互使用方式
Jun 05 Vue.js
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
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
jQuery bind事件使用详解
2011/05/05 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
浅谈js原生拖放
2016/11/21 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
Django model select的多种用法详解
2019/07/16 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
追悼会主持词
2014/03/20 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
校园广播站开场白
2015/06/01 职场文书
golang操作rocketmq的示例代码
2022/04/06 Golang