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重要知识更新
Jul 08 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
Jan 22 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 Javascript
详解JVM系列之内存模型
Jun 10 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
PHP中的cookie
2006/11/26 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
深入讲解Python中的迭代器和生成器
2015/10/26 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
Linux开机引导的步骤是什么
2015/10/19 面试题
应聘护士自荐信
2013/10/21 职场文书
期末总结的个人自我评价
2013/11/02 职场文书
校运会广播稿100字
2014/01/27 职场文书
小学英语教学反思案例
2014/02/04 职场文书
银行开业庆典方案
2014/02/06 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
一行代码python实现文件共享服务器
2021/04/22 Python
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
Consul在linux环境的集群部署
2022/04/08 Servers