纯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 相关文章推荐
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
Angular之jwt令牌身份验证的实现
Feb 14 Javascript
正则表达式基础与常用验证表达式
Jun 16 Javascript
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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
php精度计算的问题解析
2019/06/21 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
深入理解js中this的用法
2016/05/28 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
浅谈python中的数字类型与处理工具
2017/08/02 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
Python3匿名函数用法示例
2018/07/25 Python
Python编程中类与类的关系详解
2019/08/08 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
初三开学计划书
2014/04/27 职场文书
中学生检讨书1000字
2014/10/28 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python