纯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中清空数组的三种方法分享
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
You might like
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
JS实现一键回顶功能示例代码
2013/10/28 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
python的pdb调试命令的命令整理及实例
2017/07/12 Python
python实现ID3决策树算法
2018/08/29 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
python 修改本地网络配置的方法
2019/08/14 Python
python操作yaml说明
2020/04/08 Python
keras多显卡训练方式
2020/06/10 Python
python打包多类型文件的操作方法
2020/09/21 Python
中文系学生自荐信范文
2013/11/13 职场文书
财务管理职业生涯规划范文
2013/12/27 职场文书
乔迁之喜主持词
2014/03/27 职场文书
结婚保证书
2015/01/16 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
2016年度创先争优活动总结
2016/04/05 职场文书