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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
使用console进行性能测试
Apr 27 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
JQuery学习总结【二】
Dec 01 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 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小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
php与paypal整合方法
2010/11/28 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
event.srcElement+表格应用
2006/08/29 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
python爬虫常用的模块分析
2014/08/29 Python
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python Socket传输文件示例
2017/01/16 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
python tkinter控件布局项目实例
2019/11/04 Python
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
21岁生日感言
2014/02/27 职场文书
政风行风整改方案
2014/10/25 职场文书
谢师宴邀请函
2015/02/02 职场文书
活动总结模板大全
2015/05/11 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL