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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
JavaScript Date对象详解
Mar 01 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
js Dom实现换肤效果
Oct 21 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 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
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
PHP 验证登陆类分享
2015/03/13 PHP
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
Python 面向对象 成员的访问约束
2008/12/23 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
QML使用Python的函数过程解析
2019/09/26 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
python自动识别文本编码格式代码
2019/12/26 Python
基于python 取余问题(%)详解
2020/06/03 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
四风问题自查报告剖析材料
2014/02/08 职场文书
广告设计应届生求职信
2014/03/01 职场文书
倡议书格式
2014/04/14 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
学校捐书活动总结
2015/05/08 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python