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 相关文章推荐
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
javascript相等运算符与等同运算符详细介绍
Nov 09 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 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实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
python3生成随机数实例
2014/10/20 Python
Python socket编程实例详解
2015/05/27 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
Python中作用域的深入讲解
2018/12/10 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
Ajax和javascript的区别
2013/07/20 面试题
教师岗位聘任书范文
2014/03/29 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle