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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
详解vuex之store源码简单解析
Jun 13 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 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 array_flip() 删除数组重复元素
2009/01/14 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
javascript 新浪背投广告实现代码
2009/07/07 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
js闭包用法实例详解
2016/12/13 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
Python中List.index()方法的使用教程
2015/05/20 Python
Django中信号signals的简单使用方法
2019/07/04 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
python 公共方法汇总解析
2019/09/16 Python
pytorch 常用线性函数详解
2020/01/15 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
运动会致辞稿50字
2014/02/04 职场文书
法律系毕业生求职信
2014/05/28 职场文书
学校标语大全
2014/06/19 职场文书
创先争优标语
2014/06/27 职场文书
维稳工作情况汇报
2014/10/27 职场文书