<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 = ;
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 == ){
window.clearInterval(temp);
btn_el.css('background-color','#f14658');
btn_el.text('获取验证码');
btn_el.prop('disabled',false);
}
}, );

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 等伪类的状态造成的

最新文章

  1. 树莓派3B更新软件
  2. 正定矩阵(positive definite matrix)
  3. 使用adjacent_difference要注意的小问题
  4. easyui的textbox和validatebox的 赋值区别
  5. 读取视屏文件,保存帧图片为ppm文件
  6. D3.js 力导向图的制作
  7. Waring:This LinearLayout layout or its FrameLayout parent is useless; transfer the background attribute to the other view
  8. [Angular 2] Pipe Purity
  9. Kali for Android
  10. Bounding-box 回归
  11. 【R语言系列】R语言初识及安装
  12. (2)STM32使用HAL库操作外部中断——理论讲解
  13. 移动端、PC端(前后台)、小程序常用的UI框架
  14. Linux账号管理
  15. Kattis之旅——Rational Arithmetic
  16. EditPlus查找替换
  17. AWS 相关阅读
  18. Codeforces 580A - Kefa and First Steps
  19. 第二章 Java浮点数精确计算
  20. 33.[LeetCode] Search in Rotated Sorted Array

热门文章

  1. 事件监听和window.history以及自定义创建事件
  2. 手机连上同一个局域网的PC,修改项目的vhost配置
  3. python 函数 闭包 (节省内存空间 html 获取网页的源码)
  4. C语言进阶——const 和 volatile 分析09
  5. Div处理滚动条问题
  6. nodejs安装&amp;bower 安装
  7. 论如何入门地使用vscode
  8. Tomcat详解及SNS系统的部署实现
  9. Visual Studio 2017 的 JavaScript 调试功能的关闭
  10. Activiti入门 -- 环境搭建和核心API简介