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;解决此问题。
原文:http://www.cnblogs.com/isdom/p/webclips001.html