编程 Javascript

纯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>

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

- Author -

junjie

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript中清空数组的三种方法分享

Apr 07 Javascript

JS中setInterval、setTimeout不能传递带参数的函数的解决方案

Apr 28 Javascript

js+HTML5实现canvas多种颜色渐变效果的方法

Jun 05 Javascript

JavaScript实现跨浏览器的添加及删除事件绑定函数实例

Aug 04 Javascript

JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码

Sep 17 Javascript

json与jsonp知识小结(推荐)

Aug 16 Javascript

利用Node.js对文件进行重命名

Mar 12 Javascript

详解vue2.0 transition 多个元素嵌套使用过渡

Jun 19 Javascript

JS数组操作之增删改查的简单实现

Aug 21 Javascript

使用JavaScript实现node.js中的path.join方法

Aug 12 Javascript

4 种滚动吸顶实现方式的比较

Apr 09 Javascript

微信小程序 bindtap 传参的实例代码

Feb 21 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