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的with 语句的使用方法
May 09 Javascript
关于jQuery object and DOM element
Apr 15 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
json的使用小结
Jun 08 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
微信小程序工具函数封装
Oct 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
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
Laravel find in set排序实例
2019/10/09 PHP
利用js对象弹出一个层
2008/03/26 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
js实现选项卡效果
2020/03/07 Javascript
Python代理抓取并验证使用多线程实现
2013/05/03 Python
python操作MongoDB基础知识
2013/11/01 Python
Python for循环中的陷阱详解
2018/07/13 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
师范生教师实习自我鉴定
2013/09/27 职场文书
高中生毕业学习总结的自我评价
2013/11/14 职场文书
音乐教学随笔感言
2014/02/19 职场文书
2014国培学习感言
2014/03/05 职场文书
工作所在部门证明
2014/09/21 职场文书
南湾猴岛导游词
2015/02/09 职场文书