首页 > Web开发 > 详细

js 定时器的使用。 setInterval()

时间:2014-02-22 00:41:37      阅读:440      评论:0      收藏:0      [点我收藏+]

我需要实现的功能是:点击发送按钮,会出现 “已发送60s后可点击重发”,并且,60s 这个数字是随时变化的,60,59,58,57....0,然后再次返回到 发送 按钮。

类似效果,可参考  360首页 找回密码 http://i.360.cn/findpwd/ 功能 中发送短信验证。。

html 代码;

<div>
   <a href="javascript:void(0)" class="get_a" id="code_get">获取短信验证码</a> 
</div>

css 代码:

1 <style>
2  .get_a{display:block; background:#cc0000; height:40px; line-height:40px; width:135px; color:#fff; text-align:center; font-size:14px; margin-top:15px;}
3  .get_b{ background:#cbcdd0; color:#000; margin-left:5px;width:280px;height:40px; line-height:40px;text-align:center;font-size:14px; margin-top:15px;}
4 </style>

jQery 代码:

bubuko.com,布布扣
 1  <script type="text/javascript">
 2         $(function(){       
 3             var timer = null;
 4             var timeCount = 61;
 5             $("#code_get").click(function () {
 6                 if (timeCount == 61) {
 7                      timeCount = 60;
 8                      $("#code_get").addClass(get_b).html("如果未收到激活码,<b>" + timeCount + "</b>秒后请重新获取");
 9                      timer = setInterval(function () {
10                           timeCount--;
11                           $("#code_get").html("如果未收到激活码,<b>" + timeCount + "</b>秒后请重新获取");
12                          if (timeCount == 0){
13                              clearInterval(timer);
14                              $("#code_get").removeClass(get_b).html("获取短信激活码");
15                              timeCount = 61;
16                          }
17                      }, 1000);
18                  }
19        })
20 </script>
bubuko.com,布布扣

js 定时器的使用。 setInterval()

原文:http://www.cnblogs.com/xiaoxiao2014/p/3559409.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!