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 相关文章推荐
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
javascript封装简单实现方法
Aug 11 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
微信小程序 标签传入数据
May 08 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 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通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
Python爬虫爬验证码实现功能详解
2016/04/14 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
python实现AES加密解密
2019/03/28 Python
python的移位操作实现详解
2019/08/21 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
土木工程专业推荐信
2014/02/19 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
导游词400字
2015/02/13 职场文书
小学生交通安全寄语
2015/02/27 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA
以下牛机,你有几个
2022/04/05 无线电