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 相关文章推荐
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
vue实现商品列表的添加删除实例讲解
May 14 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 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
PHP 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
PHP实现简易图形计算器
2020/08/28 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
jQuery的基本概念与高级编程
2015/05/14 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
使用js获取伪元素的content实例
2017/10/24 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
Python入门之modf()方法的使用
2015/05/15 Python
python os用法总结
2018/06/08 Python
python实现感知器算法(批处理)
2019/01/18 Python
python打开使用的方法
2019/09/30 Python
如何获取Python简单for循环索引
2019/11/21 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
总经理办公室主任岗位职责
2013/11/12 职场文书
家长对小学生的评语
2014/01/28 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
工厂见习报告范文
2014/10/31 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers