我需要实现的功能是:点击发送按钮,会出现 “已发送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 代码:
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>