jQuery实现倒计时重新发送短信验证码功能示例


Posted in Javascript onJanuary 12, 2017

本文实例讲述了jQuery实现倒计时重新发送短信验证码功能的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var countdown=60;
function settime(obj) {
  if (countdown == 0) {
    obj.removeAttribute("disabled");
    obj.value="免费获取验证码";
    countdown = 60;
    return;
  } else {
    obj.setAttribute("disabled", true);
    obj.value="重新发送(" + countdown + ")";
    countdown--;
  }
setTimeout(function() {
  settime(obj) }
  ,1000)
}
</script>
<body>
<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />
</body>
</html>

实践例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>抢占iPhone7专属预订名额</title>
    <link rel="stylesheet" href="getiphone.css" />
  </head>
  <body style="width: 100%;height: 100%;background:#fff url(iponeImg/beijing.png) no-repeat center fixed;background-size:100% 100%;text-align: center;">
    <div class="top">
      <img src="iponeImg/wenan.png" />
    </div>
    <h1 class="title"><span></span>上市时间同步发售<span></span><br />首批新苹果30个预订专属名额</h1>
    <form id="activityForm" class="form-horizontal" method="post" action="/wamei/activityController/save.htm">
      <label>
        <span><img src="iponeImg/yonghu.png" /></span>
        <i></i>
        <input type="text" class="inline-input" id="name" name="name" placeholder="请输入您的真实姓名" datatype="*1-20" errormsg="姓名最多20个中英文字符!" nullmsg="请输入您的真实姓名!" />
      </label>
      <label>
        <span><img src="iponeImg/dianhua.png" /></span>
        <i></i>
        <input type="text" class="inline-input" id="mobilePhone" name="mobilePhone" placeholder="请输入您的手机号码" datatype="*" errormsg="请输入您的手机号码!" nullmsg="请输入您的手机号码!" />
      </label>
      <label>
        <span><img src="iponeImg/yanzhengma.png" /></span>
        <i></i>
        <input type="text" id="validateCode" class="inline-input" name="validateCode" placeholder="验证码" datatype="*" errormsg="请输入验证码!" nullmsg="请输入验证码!" style="width:180px;" />
        <a id="num" mark="1" >获取验证码</a>
      </label>
      <label id="get">
        <input id="confirm" type="submit" value="提交抢占名额" />
      </label>
      <label>
        <a href="/wamei/pages/activity/details.html" id="activity">查看活动详情</a>
      </label>
    </form>
    <div class="bottom">
      <span></span>
      <img src="iponeImg/logo.png" />
      <span></span>
    </div>
    <div id="success">
      <div class="successImg">
        <a class="close"></a>
        <p><img src="iponeImg/chenggong.png" />恭喜提交成功</p>
        <p style="padding-top: 0px;font-size: 23px;">分享一下,安抚激动的心</p>
      </div>
    </div>
  </body>
</html>
<!-- scripts -->
<script src="/wamei/pages/js/jquery.min.js"></script>
<script src="/wamei/pages/js/jquery.form.js"></script>
<script src="/wamei/pages/js/bootstrap.min.js"></script>
<script src="/wamei/pages/js/Validform_v5.3.2.js"></script>
<script type="text/javascript">
  $(function(){
    //提交表单
    $("#activityForm").Validform({
      btnSubmit:"#confirm",
      tiptype:function(msg){
        if(msg != '' && msg!='通过信息验证!'){
          alert(msg);
        }
      },
      tipSweep:true,
      beforeSubmit:function(){
        saveForm();
        return false;
      }
    });
  });
  //只允许在APP内打开
  function isMobile(){
    var u = navigator.userAgent;
    var mobileFlag = u.indexOf('type/tfbrowser') > -1;
    return mobileFlag;
  }
  //手机号码验证
  $("#mobilePhone").blur(function(){
    var mobilePhone =$("#mobilePhone").val();
    var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;
    if(mobilePhone){
      if(!myreg.test(mobilePhone)){
        alert("请输入有效的手机号码!");
        $("#mobilePhone").val("");
        return ;
      }
    }
  });
  //发送短信验证码
  $("#num").click(function(){
    var mobilePhone =$("#mobilePhone").val();
    var url="/wamei/activityController/sendValidCode.htm";
    if(!mobilePhone){
      alert("请输入您的手机号码!");
      return ;
    }
    var mark = $("#num").attr("mark");
    if("1"==mark){
      settime(this);
      $.post(url,{mobilePhone:mobilePhone},function(html){
        var data = eval("("+html+")");
        if(data && data.statusCode==1){
          console.log("send success!");
          alert("短信验证码已发送,请查收!");
        }else{
          alert(data.msg);
        }
      });
    }
  });
  //提交form表单
  function saveForm(){
    $("#activityForm").ajaxSubmit({
      //data: {'columnStr':columnStr},
      type: 'post',
      async: false,
      success: function($data) {
        var data = eval("("+$data+")");
        if(data && data.statusCode==1){
          $("#success").show();
        }else{
          alert(data.msg);
          $("#mobilePhone").val("");
        }
      }
    });
  }
  $(".close").click(function(){
    $("#success").hide();
    window.location.reload();
  })
  //短信后倒计时
  var countdown=60;
  function settime(obj) {
    if (countdown == 0) {
      $(obj).attr("disabled",false);
      $(obj).attr("mark","1");
      $(obj).html("获取验证码");
      countdown = 60;
      return;
    } else {
      $(obj).attr("disabled", true);
      $(obj).attr("mark","0");
      $(obj).html("重新发送(" + countdown + ")");
      countdown--;
    }
    setTimeout(function() {
          settime(obj) }
        ,1000)
  }
// $("#confirm").click(function(){
//   $("#success").show();
// })
</script>
Javascript 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
JavaScript prototype属性使用说明
May 13 Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
原生js实现放大镜组件
Jan 22 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 #Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 #Javascript
JS百度地图搜索悬浮窗功能
Jan 12 #Javascript
原生js实现焦点轮播图效果
Jan 12 #Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 #Javascript
vuejs父子组件通信的问题
Jan 11 #Javascript
bootstrap 表单验证使用方法
Jan 11 #Javascript
You might like
php购物车实现代码
2011/10/10 PHP
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
php的sso单点登录实现方法
2015/01/08 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
超简单的微信小程序轮播图
2019/11/22 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
上课迟到检讨书
2014/01/19 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
元宵晚会主持词
2014/03/25 职场文书
全陪导游词开场白
2015/05/29 职场文书
关于远足的感想
2015/08/10 职场文书
2019个人工作总结
2019/06/21 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
Golang的继承模拟实例
2021/06/30 Golang