JS倒计时,不会重复执行
直接上代码,亲自测试了的,没问题咯
第一种是按钮上直接显示倒计时,
<html>
<head>
<title>点击获取验证码按钮后按钮变灰,倒计时一段时间后又可重复点击</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
</head>
<body>
<input type="button" id="btn" value="免费获取验证码" onclick="timer(10)" />
<script type="text/javascript">
function timer(time) {
var btn = $("#btn");
btn.attr("disabled", true); //按钮禁止点击
btn.val(time <= ? "免费获取验证码" : ("" + (time) + "秒后可发送"));
var hander = setInterval(function() {
if (time <= ) {
clearInterval(hander); //清除倒计时
btn.val("免费获取验证码");
btn.attr("disabled", false);
return false;
}else {
btn.val("" + (time--) + "秒后可发送");
}
}, );
}
</script>
</body>
</html>
第二种效果是点击按钮后,按钮被禁用,在另一处显示倒计时
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js">
</script>
<style>
* {
margin: ;
padding: ;
} #ant {
width: 150px;
height: 50px;
color: red;
text-align: center;
line-height: 50px;
margin: 0px auto;
}
</style>
<script>
function test() { var count = ;
var timer = null;
timer = setInterval(function () {
if (count > ) {
count = count - ;
$("#ant").html(count + "秒后再试");
$("#sendCode").attr("disabled", "disabled");
} else {
$("#sendCode").removeAttr("disabled", "disabled");
$("#sendCode").html("发送验证码");
clearInterval(timer);
}
}, );
}
</script>
</head>
<body>
<input type="button" value="发送验证码" onclick="test()" id="sendCode" />
<div id="ant"></div>
</body>
</html>
有的朋友说第一种有问题,当使用来发送短信的时候,会发送两条短信,毛病还没找到,有解决了的大神麻烦指点下,谢谢了
JS倒计时,不会重复执行的更多相关文章
- js定时器整理(执行一次、重复执行)
在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout("function();",delaytime); 2.循环 ...
- js定时器(执行一次、重复执行)
代码如下: <script> //定时器 异步运行 function hello(){ alert("hello"); } //使用方法名字执行方法 var t1 = ...
- js中click重复执行
问题背景:在写一个非常简单添加方法的时候,用onclick事件调用添加方法,点击第一次没问题,第二次会重复执行,经过多次查找资料得知这个状况的解决方案,特意总结一下: 代码如下:点击#spec_for ...
- 【JavaScript】使用定时器实现Js的延期执行或重复执行setTimeout,setInterval
使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval.其中前者可 ...
- JS流程控制语句 反反复复(while循环) 和for循环有相同功能的还有while循环, while循环重复执行一段代码,直到某个条件不再满足。
反反复复(while循环) 和for循环有相同功能的还有while循环, while循环重复执行一段代码,直到某个条件不再满足. while语句结构: while(判断条件) { 循环语句 } 使用w ...
- JS去除数组中重复值的四种方法
JS去除数组中重复值的四种方法 1 /// <summary> o[this[i]] = ""; } } newArr.p ...
- JS倒计时 代码
JS倒计时 代码 <div> <span id="KSD">3</span>天 <span id="KSH">1 ...
- JS的预编译和执行顺序 详析
原文:JS的预编译和执行顺序 详析 最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题 代码: 复制代码 代码一 <ht ...
- Spring的quartz定时器重复执行二次的问题解决
Spring的quartz定时器同一时刻重复执行二次的问题解决 最近用Spring的quartz定时器的时候,发现到时间后,任务总是重复执行两次,在tomcat或jboss下都如此. 打印出他们的ha ...
- js倒计时 手机休眠时 时间不进行减少
http://www.111cn.net/wy/js-ajax/94218.htm 手机版网页js倒计时存在的问题与解决的方法 www.111cn.net 更新:2015-09-16 编辑:kp123 ...
随机推荐
- #define 中#和##的作用
#的作用是把后面的参数变成一个字符串. 如,#define f(a) #a f(hello world)相当于"hello world": ##的作用是把两个字符串连接起来. 如, ...
- 如何配置和使用Spring框架的bean
1. 首先在src目录下新建beans.xml文件,该文件名可更改. 2. 编辑xml文件如下,这里需要注意的是beans的表头中信息需要根据不同的版本对应的内容不同,本例中使用的spring的版本为 ...
- JS数组的基本用法
JS数组的用法包括创建.取值赋值.添加以及根据下标(包括数值或字符)来移除元素等等,在本文中将为大家详细介绍,感兴趣的朋友可以参考下. 1.创建数组: //1.1直接创建一个数组对象 var arra ...
- Redis学习笔记二:单机数据库的实现
1. 数据库 服务器中的数据库 Redis服务器将所有数据库都保存在服务器状态redis.h/redisServer结构的db数组中,db数组的每个项都是一个redis.h/redisDb结构,每个r ...
- C# switch
要开学了(啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊) 做个沉默的行动者吧!(嘘嘘嘘嘘嘘嘘)今天去水题发现好多基础都不知道啊 1. switch(控制语句) { case 常量表达式:{statement ...
- 5分钟教你Windows 10中将“运行”固定到开始菜单
导读 “运行”功能深受很多资深IT之家用户喜爱,因为它简约.方便.实用.在Win7等旧版系统中,用户可以让该功能直接在开始菜单显示,方便操作.但在Win10中,由于开始菜单已经重新编写,原有的设定已经 ...
- ionic懒加载图片
https://github.com/paveisistemas/ionic-image-lazy-load <script src="lib/ionic/js/ionic-image ...
- word20161129
1. nested 英[nestɪd]美[nestɪd]adj. 嵌套的;v. 筑巢( nest的过去式和过去分词 );[例句]In the makeGrades method I use a cod ...
- View的3种测量模式
EXACTLY:表示设置了精确的值,一般当childView设置其宽.高为精确值.match_parent时,ViewGroup会将其设置为EXACTLY: AT_MOST:表示子布局被限制在一个最大 ...
- Failed to resolve: junit:junit:4.12
在Android Studio创建项目之后,提示一个junit错误. 解决方案: 第一步:找到build.gradle的file,如图: 第二步: 第三步:把中间行代码"testCompi ...