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控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 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自动跳转中英文页面
2008/07/29 PHP
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
php生成与读取excel文件
2016/10/14 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
vue实现循环切换动画
2018/10/17 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
python编码最佳实践之总结
2016/02/14 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
python万年历实现代码 含运行结果
2017/05/20 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
python Xpath语法的使用
2020/11/26 Python
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
爱游人:Travelliker
2017/09/05 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
关于廉洁的广播稿
2014/01/30 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
租房安全协议书
2014/08/20 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
Oracle中日期的使用方法实例
2022/07/07 Oracle