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

 

<a href="javascript:void(0);" onclick="get_captcha()" class="btn btn-default btn6" id="for_captcha" >获取验证码</a>

<script type="text/javascript">
 
var url="/get-verify-code?phone_number=";
var i;
          
function count_down(){
      i=i-1;
      $('#for_captcha').attr('disabled','disabled');
      $('#for_captcha').html('剩余'+i+'秒..');
      if(i<=0){
      $('#for_captcha').removeAttr('disabled','disabled');
      $('#for_captcha').html('获取验证码');
                window.clearTimeout(countdown);
       }
       else{
                var countdown=setTimeout('count_down()',1000);
       }              
}

function get_captcha(){
    var phone= $('#phone').val();//console.log(phone);
    url=url+phone;              

     re= /^1\d{10}$/;            
     if (re.test(phone)) {
             $.post(url,function(data){
                    console.log(date);
             }).complete(function(){
                    console.log('complete');
             });

             i=60;
             count_down();
      }
      else {
             alert("手机号码不正确");
             return false;
      }

 }
</script>

var btn_el = $(this);
var wait = 5;
btn_el.css('background-color','#aaa');
btn_el.text('再次获取'+wait+'...');
btn_el.prop('disabled',true);
var temp = setInterval(function(){
    wait--;
    btn_el.text('再次获取'+wait+'...');
    if(wait == 0){
        window.clearInterval(temp);
        btn_el.css('background-color','#f14658');
        btn_el.text('获取验证码');
        btn_el.prop('disabled',false);
    }
}, 1000);

 

note:

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

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

        一切正常了

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

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

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

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

2015-11-11 编辑补充两点

 对于disabled 之类的dom元素属性 不应该使用attr()方法操作 而应该换用jquery1.6+ 的prop()

对于dom属性具有相关类似true or false 属性的操作,应该使用prop 操作 ,否则会出现一些浏览器会发生仍然响应或者拿到不对的值的问题

To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method. 

覆盖我之前的样式现已知,是因为:focus :active 等伪类的状态造成的