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 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
js下获取div中的数据的原理分析
Apr 07 Javascript
jquery高效反选具体实现
May 05 Javascript
js+css实现增加表单可用性之提示文字
Jun 03 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
使用原生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
PHP 和 COM
2006/10/09 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
vue中轮训器的使用
2019/01/27 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
Python实现网站文件的全备份和差异备份
2014/11/30 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
python中的global关键字的使用方法
2019/08/20 Python
Python Lambda函数使用总结详解
2019/12/11 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
专科文秘应届生求职信
2013/11/18 职场文书
会计工作决心书
2014/03/11 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python