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 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
js 刷新页面的代码小结 推荐
Apr 02 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
JS+CSS实现炫酷光感效果
Sep 05 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出错界面
2006/10/09 PHP
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
再谈javascript原型继承
2014/11/10 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
创业计划书的写作技巧及要点
2014/01/31 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
人生遥控器观后感
2015/06/11 职场文书
新闻稿标题
2015/07/18 职场文书
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
Python获取字典中某个key的value
2022/04/13 Python
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript