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 相关文章推荐
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 Javascript
react ant Design手动设置表单的值操作
Oct 31 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 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
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
python通过线程实现定时器timer的方法
2015/03/16 Python
python简单的函数定义和用法实例
2015/05/07 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
Python实现直播推流效果
2019/11/26 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
基于python实现删除指定文件类型
2020/07/21 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
客服主管岗位职责
2013/12/13 职场文书
师范学院毕业生求职信范文
2013/12/26 职场文书
战略合作协议书范本
2014/04/18 职场文书
医生个人年终总结
2015/02/28 职场文书
小人国观后感
2015/06/11 职场文书
警示教育观后感
2015/06/17 职场文书
2015小学师德工作总结
2015/07/21 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
python opencv通过4坐标剪裁图片
2021/06/05 Python
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android