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 相关文章推荐
JS 统计时间
Mar 09 Javascript
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 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创建多级目录代码
2008/06/05 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
JQuery从头学起第二讲
2010/07/04 Javascript
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
python使用多进程的实例详解
2018/09/19 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
python检测服务器端口代码实例
2019/08/31 Python
Python with语句和过程抽取思想
2019/12/23 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
python中time、datetime模块的使用
2020/12/14 Python
助人为乐好少年事迹材料
2014/08/18 职场文书
元宵节晚会主持词
2015/07/01 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
python中tkinter复选框使用操作
2021/11/11 Python