Js实现手机发送验证码时按钮延迟操作


Posted in Javascript onJune 20, 2014

实例代码记录:

<script type="text/javascript">
  function start_sms_button(obj){
    var count = 1 ;
    var sum = 30;
    var i = setInterval(function(){
      if(count > 10){
        obj.attr('disabled',false);
        obj.val('发送验证码');
        clearInterval(i);
      }else{
        obj.val('剩余'+parseInt(sum - count)+'秒');
      }
      count++;
    },1000);
  }
 
  $(function(){
    //发送验证码
    $('#send_sms').click(function(){
      var phone_obj = $('input[name="phone"]');
      var send_obj = $('input#send_sms');
      var val = phone_obj.val();
      if(val){
        if(IsMobile(val)){
          send_obj.attr('disabled',"disabled");
          //30秒后重新启动发送按钮
          start_sms_button(send_obj);
          $.ajax({
            url:'{#url_reset("index/sms")#}',
            data:{'mobile':val},
            dataType:'json',
            type:'post',
            beforeSend:function(){
              show_loading_body();
            },
            complete:function(){
              show_loading_body();
            },
            success:function(data){
              if(data.status!=undefined && (data.status == 'ok' || data.status == 'error')){
                showMsg(data.msg);
              }
            }
          });
        }else{
          showMsg("手机号的格式错误");
        }
      }else{
        showMsg('手机号不能为空');
      }
    });
  });
</script>
Javascript 相关文章推荐
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
vue-model实现简易计算器
Aug 17 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 #Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 #Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 #Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 #Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 #Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 #Javascript
Node.js实现简单聊天服务器
Jun 20 #Javascript
You might like
提问的智慧
2006/10/09 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
PHP的自定义模板引擎
2017/03/24 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
JQuery 小练习(实例代码)
2009/08/07 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
javascript时间差插件分享
2016/07/18 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
python处理中文编码和判断编码示例
2014/02/26 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
2014年协会工作总结
2014/11/22 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书