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 RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
Vue实现简单的留言板
Oct 23 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 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 smarty模版引擎中的缓存应用
2009/12/11 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
异步加载script的代码
2011/01/12 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
python 运算符 供重载参考
2009/06/11 Python
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
python实现简易通讯录修改版
2018/03/13 Python
Python socket 套接字实现通信详解
2019/08/27 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
优秀体育委员自荐书
2014/01/31 职场文书
融资租赁计划书
2014/04/29 职场文书
生日宴会策划方案
2014/06/03 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
创业计划书之餐饮
2019/09/02 职场文书
浅谈Java父子类加载顺序
2021/08/04 Java/Android
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python