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去空格的正则表达式
Mar 26 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
详解tween.js的使用教程
Sep 14 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 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 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
jQuery 加上最后自己的验证
2009/11/04 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
web打印小结
2017/01/11 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
详解webpack2+React 实例demo
2017/09/11 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
Python探索之pLSA实现代码
2017/10/25 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
django自定义模板标签过程解析
2019/12/14 Python
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
节约用水倡议书
2014/04/16 职场文书
有关爱国演讲稿
2014/05/07 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书