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

clips 前端 js 倒计时 获取验证码的按钮

时间:2015-06-16 21:10:38      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

 

 1 <a href="javascript:void(0);" onclick="get_captcha()" class="btn btn-default btn6" id="for_captcha" >获取验证码</a>
 2 
 3 <script type="text/javascript">
 4  
 5 var url="/get-verify-code?phone_number=";
 6 var i;
 7           
 8 function count_down(){
 9       i=i-1;
10       $(#for_captcha).attr(disabled,disabled);
11       $(#for_captcha).html(剩余+i+秒..);
12       if(i<=0){
13       $(#for_captcha).removeAttr(disabled,disabled);
14       $(#for_captcha).html(获取验证码);
15                 window.clearTimeout(countdown);
16        }
17        else{
18                 var countdown=setTimeout(count_down(),1000);
19        }              
20 }
21 
22 function get_captcha(){
23     var phone= $(#phone).val();//console.log(phone);
24     url=url+phone;              
25 
26      re= /^1\d{10}$/;            
27      if (re.test(phone)) {
28              $.post(url,function(data){
29                     console.log(date);
30              }).complete(function(){
31                     console.log(complete);
32              });
33 
34              i=60;
35              count_down();
36       }
37       else {
38              alert("手机号码不正确");
39              return false;
40       }
41 
42  }
43 </script>

note:

   项目使用了bootstrap,当我写这个脚本的时候,我发现一个很诡异的现象,在点击获取按钮的一瞬间按钮消失了

   firefox和chrome浏览器里都有那么一瞬间,但是只要稍微触碰任意一下页面元素甚至只是在f12换一个元素审查,

        一切正常了

   我发现当禁用后的position 变成了relative,而正常情况下一直是static状态 但问题不在这里 原因是bootstrap的预定义样式

  btn btn-default 在一瞬间应用优先权重超过了我定义的 其中一项background-color:white造成了覆盖和按钮消失的错觉,这本是不应发生的。

     因为触碰任意页面一个元素,浏览器又会重新计算,从而应用我的定义样式

  暂仍未找到他覆盖我样式的直接原因,目前先用 background-color:#218e23 !important;解决此问题。

 

clips 前端 js 倒计时 获取验证码的按钮

标签:

原文地址:http://www.cnblogs.com/isdom/p/webclips001.html

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