码迷,mamicode.com
首页 > Web开发 > 详细

JS倒计时,不会重复执行

时间:2016-04-11 23:59:03      阅读:554      评论:0      收藏:0      [点我收藏+]

标签:

直接上代码,亲自测试了的,没问题咯

<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 <= 0 ? "免费获取验证码" : ("" + (time) + "秒后可发送"));
    var hander = setInterval(function() {
        if (time <= 0) {
            clearInterval(hander); //清除倒计时
            btn.val("免费获取验证码");
            btn.attr("disabled", false);
            return false;
        }else {
            btn.val("" + (time--) + "秒后可发送");
        }
    }, 1000);
}
</script> 
</body> 
</html>

 

JS倒计时,不会重复执行

标签:

原文地址:http://www.cnblogs.com/LoveQin/p/5380702.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!