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

2024-12-03 05:18:51

本文实例讲述了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>

PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：

JavaScript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript

正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery日期与时间操作技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)

相关阅读: 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能) 今天测试提了一个bug,发送短信倒计时功能,要求关闭页面也要进行倒计时.这想到了,当年我参与的周杰伦演唱会的先付先抢功能.与之类似,只不过,那个项目的时间都是服务器时间,本人目前有点偷懒,就用客户端的时间了. 一下是完整的代码,只不过在客户端的效率不是很好. <!doctype html> <html lang="en"> <head> <meta
jQuery插件开发发送短信倒计时功能代码

实现的主要功能如下: 1.点击按钮的时候,可以进行倒计时,倒计时自定义. 2.当接收短信失败后,倒计时停止,可点击重新发送短信. 3.点击的元素支持一般标签和input标签. html代码: <input type="button" class="sameBtn btnCur" value="发送验证码"/> <div class="sameBtn btnCur2">发送验证码</div>
jQuery短信验证倒计时功能实现方法详解

本文实例讲述了jQuery短信验证倒计时功能实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > &l
jQuery实现倒计时重新发送短信验证码功能示例

本文实例讲述了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
Python3实现发送邮件和发送短信验证码功能

Python3实现发送邮件: import smtplib from email.mime.text import MIMEText from email.utils import formataddr my_sender = '1434399884@qq.com' # 发件人邮箱账号 my_pass = '*********' # 发件人邮箱的授权码 my_user = '3152609963@qq.com' # 收件人邮箱账号,我这边发送给自己 def mail(): ret= True t
Django使用celery异步发送短信验证码代码示例

目录 celery 1.celery介绍 1.1 celery应用举例 1.2 Celery有以下优点 1.3 Celery 特性 2.工作原理 2.1 Celery 扮演生产者和消费者的角色 3.异步发短信 1.settings同级目录下创建 celery 文件 2.配置settings文件 3 配置 settings同级目录下 init 文件 4.在utils下新建一个task.py文件 5.接口中调用 6 .先启动django项目然后另开终端 cd到项目 celery 1.celery介
Java实现发送短信验证码功能

一个发送短信验证码的功能,使用的是信易通的短信平台接口,然后在Java中使用HttpClient模拟POST请求或者GET请求(看短信平台要求,一般的情况下都是POST请求),调用短信平台提供的接口(遵循短信平台的接口规范即可).具体看代码: 使用HttpClient的时候需要在项目中引入: commons-httpclient-3.1.jar 这个jar包, 项目结构: 1.创建一个Http的模拟请求工具类,然后写一个POST方法或者GET方法 /** * 文件说明 * @Descriptio
js实现5秒倒计时重新发送短信功能

本文实例讲述了js实现倒计时重新发送短信验证码功能的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js-手机发送短信倒计时</title> <style> button{ width: 100px; height: 30px; border: none
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)

相关阅读: 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭) 下面一段代码是小编给大家带来的js发送短信验证码后实现倒计时功能,代码简单易懂. 具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus
Android实现发送短信验证码倒计时功能示例

一.简介: 开发中在用户注册或找回密码之类的功能,经常会遇到获取短信验证码,获取验证码后需要等待1分钟倒计时,这段时间是不能再次发送短信请求的. 效果图: 二.实现步骤: 1.一个关键类:CountDownTimer(Android系统自带的倒计时功能类) public class CountDownTimerUtils extends CountDownTimer { private TextView mTextView; //显示倒计时的文字 /** * @param textView Th
微信小程序实现发送短信验证码倒计时

本文实例为大家分享了微信小程序发送短信验证码倒计时的具体代码,供大家参考,具体内容如下效果图 WXML文件 <view class="container"> <view class="userinfo"> <image class="userinfo-avatar" src="../../images/timg.jpg" mode="cover"></image&
javascript发送短信验证码实现代码

本文首先分析手机发送验证码的原理,再对javascript发送短信验证码予以实现,具体思路如下: 实现点击"发送验证码"按钮后,按钮依次显示为"59秒后重试"."58秒后重试"-直至倒计时至0秒时再恢复显示为"发送验证码".在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件.设置定时器变量和计时变量第二步.添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为"发送验证码&quo

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

相关推荐

随机推荐