纯js实现重发验证码按钮倒数功能


Posted in Javascript onApril 21, 2015

代码一:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script type="text/javascript" src="js/jquery.js"></script> 
</head> 

<body> 
<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /> 
<script type="text/javascript"> 
var countdown=60; 
function settime(val) { 
if (countdown == 0) { 
val.removeAttribute("disabled");  
val.value="免费获取验证码"; 
countdown = 60; 
} else { 
val.setAttribute("disabled", true); 
val.value="重新发送(" + countdown + ")"; 
countdown--; 
} 
setTimeout(function() { 
settime(val) 
},1000) 
} 
</script> 
</body> 
</html>

代码二:

注册的时候需要发送验证激活帐号的邮件,为了避免邮件的多次重复发送,所以可以在点击了发送后,设置button要过一段时间才能继续点击。下面是一个简单的例子:

<html> 
<head> 
<title>点击获取验证码按钮后按钮变灰,倒计时一段时间后又可重复点击</title> 
</head> 
<body> 
<input type="button" id="btn" value="免费获取验证码" /> 
<script type="text/javascript"> 
var wait=60; 
function time(o) { 
    if (wait == 0) { 
      o.removeAttribute("disabled");      
      o.value="免费获取验证码"; 
      wait = 60; 
    } else { 
      o.setAttribute("disabled", true); 
      o.value=wait+"秒后可以重新发送"; 
      wait--; 
      setTimeout(function() { 
        time(o) 
      }, 
      1000) 
    } 
  } 
document.getElementById("btn").onclick=function(){time(this);} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
详解javascript中原始数据类型Null和Undefined
Dec 17 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
jQuery滚动条插件nanoscroller使用指南
Apr 21 #Javascript
jQuery验证插件validation使用指南
Apr 21 #Javascript
jQuery拖拽插件gridster使用指南
Apr 21 #Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 #Javascript
jQuery提示插件alertify使用指南
Apr 21 #Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 #Javascript
Jquery遍历Json数据的方法
Apr 20 #Javascript
You might like
PHP中显示格式化的用户输入
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
python清空命令行方式
2020/01/13 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
开办饭店创业计划书
2013/12/28 职场文书
银行开业庆典方案
2014/02/06 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
三严三实对照检查材料
2014/09/22 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
领导欢迎词致辞
2015/01/23 职场文书
英文邀请函
2015/02/02 职场文书
房屋维修申请报告
2015/05/18 职场文书
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
python中的sys模块和os模块
2022/03/20 Python
MySQL自定义函数及触发器
2022/08/05 MySQL