登录页面发送验证码倒计时功能

最新推荐文章于 2023-02-07 16:59:16 发布
最新推荐文章于 2023-02-07 16:59:16 发布
阅读量486 收藏
点赞数
分类专栏： 小知识 文章标签： css3 css html jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BubbleABC/article/details/122823878
版权

要引入jquery的
以下是html页面

<!DOCTYPE html>
<html>
  <head>
    <title>后台管理登录 - Powered by {:config('hisiphp.name')}</title>
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <link rel="stylesheet" href="__PUBLIC_JS__/layui/css/layui.css" />
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
        font-family: PingFangSC-Regular, PingFang SC;
      }
      .logindl {
        position: relative;
        width: 100vw;
        height: 100vh;
        background: #00f;
      }
      .logintitle {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        padding-left: 2.917rem;
        width: 100%;
        height: 3.865rem;
        background: #ffffff;
        box-shadow: 0rem 0rem 0.573rem 0rem rgba(73, 128, 255, 0.16);
      }
      .logintitle img {
        margin-right: 0.99rem;
        width: 2.156rem;
        height: 2.156rem;
      }
      .logintitle span {
        font-size: 1.042rem;
        font-weight: 400;
        color: #333333;
      }
      .centerinfo {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #ffffff;
        border-radius: 0.729rem;
        padding: 2rem 4.479rem 1.546rem 4.479rem;
      }
      .centerinfo #tab_bar ul {
        display: flex;
        justify-content: space-between;
        padding: 0 2.042rem;
      }
      .centerinfo #tab_bar ul li {
        list-style: none;
        font-size: 1.15rem;
        font-weight: 500;
        color: #666666;
      }
      #tab1_content,
      #tab2_content {
        margin: 2.2rem -1rem 0 -1rem;
      }
      #tab1_content .phonenum input,
      #tab2_content .zhlogin input,
      #tab2_content .pwlogin input {
        border-radius: 2.604rem;
        border: 0.052rem solid #afafaf;
        padding: 0.842rem 1.467rem;
        width: 19rem;
        height: 1.279rem;
        font-size: 1.042rem;
        font-weight: 400;
        color: #666666;
      }
      #tab1_content .yzm,
      #tab2_content .yzmlogin {
        display: flex;
        align-items: center;
        margin-top: 1.2rem;
      }
      #tab1_content .yzm #yzm {
        border-radius: 2.604rem;
        border: 0.052rem solid #afafaf;
        padding: 0.842rem 1.467rem;
        width: 11rem;
        height: 1.279rem;
        margin-right: 1.363rem;
        font-size: 1.042rem;
        font-weight: 400;
        color: #666666;
      }
      #tab1_content .yzm #fsyzm {
        font-size: 1.042rem;
        font-weight: 400;
        color: #4980ff;
        background: none;
        border: none;
      }
      #tab2_content .yzmlogin {
        width: 22.5rem;
        display: flex;
        align-items: center;
      }
      #tab2_content .yzmlogin input {
        border-radius: 2.604rem;
        border: 0.052rem solid #afafaf;
        padding: 0.842rem 1.467rem;
        width: 9.66rem;
        height: 1.279rem;
        margin-right: 1.863rem;
        font-size: 1.042rem;
        font-weight: 400;
        color: #666666;
      }
      #tab2_content .yzmlogin div {
        width: 7rem;
        height: 2.7rem;
        background: #000;
      }
      .dlbtn,
      .btnlogin {
        margin-top: 2.438rem;
        width: 22rem;
        height: 3.2rem;
        background: #4980ff;
        border-radius: 2.771rem;
        display: flex;
        justify-content: center;
        align-items: center;

        font-size: 1.15rem;
        font-weight: 500;
        color: #ffffff;
      }

      #tab2_content .zhlogin,
      #tab2_content .pwlogin {
        margin-top: 1.2rem;
      }
    </style>
  </head>
  <body>
    <div class="logindl">
      <div class="logintitle">
        <img src="./logo.png" alt="" />
        <span>心耘后台管理中心</span>
      </div>

      <div class="centerinfo">
        <div id="tab_bar">
          <ul>
            <li id="tab1" onclick="myclick(1)" style="color: #407efd">
              手机号登录
            </li>
            <li id="tab2" onclick="myclick(2)">账号登录</li>
          </ul>
        </div>

        <div class="tab_css" id="tab1_content" style="display: block">
          <div class="phonenum">
            <input type="number" name="" id="" placeholder="手机号" />
          </div>
          <div class="yzm">
            <input type="text" name="" id="yzm" placeholder="验证码" />
            <input
              type="button"
              name=""
              id="fsyzm"
              onclick="sendCode(this)"
              value="发送验证码"
            />
          </div>

          <div class="dlbtn">登录</div>
        </div>

        <div class="tab_css" id="tab2_content" style="display: none">
          <div class="zhlogin">
            <input type="text" name="" id="" placeholder="账号" />
          </div>
          <div class="pwlogin">
            <input type="number" name="" id="" placeholder="密码" />
          </div>
          <div class="yzmlogin">
            <input type="text" name="" id="" placeholder="验证码" />
            <div>验证码</div>
          </div>

          <div class="btnlogin">登录</div>
        </div>
      </div>
    </div>

    <script src="./jquery.js"></script>
    <script>
      //手机号登录和账号登录切换
      var myclick = function (v) {
        var lis = document.getElementsByTagName("li");
        for (var i = 0; i < lis.length; i++) {
          var li = lis[i];
          if (li == document.getElementById("tab" + v)) {
            li.style.color = "#407EFD";
          } else {
            li.style.color = "#666666";
          }
        }
        var divs = document.getElementsByClassName("tab_css");
        for (var i = 0; i < divs.length; i++) {
          var div = divs[i];
          if (div == document.getElementById("tab" + v + "_content")) {
            div.style.display = "block";
          } else {
            div.style.display = "none";
          }
        }
      };
      //发送验证码倒计时
      var clock = "",
        nums = 30;
      var btn;
      function sendCode(thisBtn) {
        btn = thisBtn;
        btn.disabled = true; //将按钮置为不可点击
        btn.value = "倒计时 " + nums + " 秒";
        clock = setInterval(doLoop, 1000); //一秒执行一次
      }
      function doLoop() {
        nums--;
        if (nums > 0) {
          btn.value = "倒计时 " + nums + " 秒";
        } else {
          clearInterval(clock); //清除js定时器
          btn.disabled = false;
          btn.value = "发送验证码";
          nums = 30; //重置时间
        }
      }
    </script>
  </body>
</html>
钟Bubble
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
注册/登录页面-短信验证码的发送与倒计时
M_Reus_11的博客
06-30 496
注册/登录页面
前端验证码倒计时、后台发送验证码、创蓝短信接口
hua950327的博客
09-22 2827
前端验证码倒计时、后台发送验证码、创蓝短信接口
登录注册中的验证码倒计时
qq_33040483的博客
10-11 334
&lt;span v-if="sendDisabled"&gt;{{time+'秒后获取'}}&lt;/span&gt; &lt;span v-if="!sendDisabled" @click="sends"&gt;获取验证码&lt;/span&gt; data{  return {       time: 60, // 发送验证码倒计时       sendMsgDi
验证码倒计时
我的博客
04-20 405
前端在做登录页面时，大多数都需要倒数计时 需求：点击获取验证码按钮，开始倒数，倒数时间60s，倒数到0秒后恢复获取验证码、如果获取验证码接口有误，中止倒数，显示获取验证码 样式： 先设置变量： countdown: 60, // 倒计时 timer: null // 控制是否开始倒数 倒计时方法： getCode() { const TIME_COUNT = 60; if (!this.timer) { this.coun
VUE定时器，用于登陆获取验证码倒计时
WANGkaiyuan666的博客
02-07 633
是一个实现定时调用的函数。并在里面进行判断，如果当前的秒数大于0的话，就一步步减去，每次减去为1000毫秒。在当前的按钮中添加@click 事件，并在按钮内文字后面加上变量。在data里将变量赋值为60（此处为秒数，可随意定义）将click事件的值传到方法里，然后添加一个。
jquery实现手机发送验证码的倒计时代码
10-26
本篇将详细介绍如何使用jQuery实现手机发送验证码的倒计时功能。 首先，我们需要一个JavaScript函数来处理倒计时逻辑。以下是一个基本的实现示例： ```javascript // 初始化等待时间 var wait = 60; // time 函数...
Android中验证码倒计时的简单实现方法示例
01-06
现在的很多app都是使用手机注册的，为了确认使用的是自己的手机，都会加上一个短线验证码的选项，最近公司的项目使用到了这个短信验证码，并且要加入验证码倒计时功能，也就是60秒才能发送一次验证码，再次做过记录...
手机注册发送验证码倒计时的简单实例
12-29
如下所示： ()这里用的是input做的点击发送验证码 <input type=number class=input name=mobile placeholder=...//页面初始化获取倒计时数字（避免在倒计时时用户刷新浏览器导致倒计时归零） var $getCodeInput =
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
10-21
最近做了一个项目，其中有需求要求实现发送短信验证码后倒计时功能，其中有个难点：要求关闭页面也进行倒计时。好吧，下面小编把jquery 发送验证码倒计时的实现代码分享给大家，大家可以参考下
iOS发送验证码倒计时应用
08-31
总的来说，实现iOS中的发送验证码倒计时功能主要涉及定时器的管理和界面的同步更新。通过GCD的定时器和适当的界面回调，我们可以创建一个直观且用户体验良好的倒计时功能。这个功能不仅提高了用户交互的效率，还增加...
HTML5仿百度制作简单的登录界面.zip
05-23
用HTML5制作的仿照百度的简单登录界面，登录验证，登录后进入登录信息显示界面，大学HTML5的登录界面小作业，有问题可以私聊
登录 使用js实现验证码倒计时
One_Piece111的博客
09-23 169
<!DOCTYPE html> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="ass
layui发送手机验证码
阿泽的IT技术博客
09-04 66
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>登入</title> <metaname="viewport"content="width=de...
发送验证码
csdn_nevermore的博客
01-11 133
验证码
接入短信验证码代码
短信接口_短信验证码_短信验证码接口
03-20 616
短信验证码接入分前端和后端，具体代码如下 前端代码 <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1...
短信验证码的实现
xy19950125的博客
07-15 410
1 需要第三方平台--阿里云2 下载完毕后直接放入项目中3 建立一个index.html；简单搭建一个就行了&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="https://cdn.
短信验证码
你的益达的博客
01-17 464
思路 1.引入相关坐标 2.引入所需js文件 3.写form表单 4.后台通过入参接收前台发送的手机号 5.随机生成一个验证码 6.将随机生成的验证码放到session中 7.将手机号和验证码传给工具包 调用工具包接口来发送短信 前台页面 &amp;amp;amp;amp;lt;%-- Created by IntelliJ IDEA. User: LI WAN Date: 2019/1/16 Time: 16:...
发送验证码倒计时效果实现
m0_57712926的博客
09-29 1473
目录前言一、应用场景二、代码演示三、 效果演示总结 前言 今天用@vueuse/core中提供的一个方法，实现发送验证码时倒计时的一个效果。这样的场景使我们经常会见到的，一起来看一下如何实现 一、应用场景 用户选择手机号和验证码登录的时候，往往需要填写手机号后，点击发送验证码来进行后续操作。那么发送验证码的动作应该有一个限制，不然用户一直点击按钮，不但会给用户带来经济损失，也会发送很不必要的请求给后台。 所以对用户点击发送验证码后的按钮，进行一个倒计时的防抖操作是必须的。 二、代码演示 用到的butto
验证码倒计时js
我的乌托
01-01 954
getVarify.js // 验证码计时——第一种 window.onload = function () { var send = document.getElementById('send'), //按钮ID times = 10, // 别忘了改这里 timer = null; send.onclick = function () { ...
使用Jquery发送验证码倒计时60秒限制
最新发布
06-09
好的，以下是一个简单的示例代码，可以使用jQuery发送验证码并倒计时60秒： HTML: ```html <input type="text" id="phone" placeholder="请输入手机号码"/> <button id="send-code">获取验证码</button> ``` JavaScript: ```javascript $(document).ready(function() { var count = 60; //倒计时初始值 var countdownTimer; //倒计时定时器 // 点击“获取验证码”按钮 $("#send-code").click(function() { var phone = $("#phone").val(); if (phone == "") { alert("请输入手机号码"); return; } // 发送验证码的逻辑 $.ajax({ url: "send_code.php", type: "POST", data: { phone: phone }, success: function(response) { if (response == "success") { // 发送成功，开始倒计时 startCountdown(); } else { alert("发送失败，请稍后重试"); } }, error: function() { alert("发送失败，请稍后重试"); } }); }); // 开始倒计时 function startCountdown() { count = 60; $("#send-code").prop("disabled", true); countdownTimer = setInterval(function() { count--; if (count <= 0) { clearInterval(countdownTimer); $("#send-code").prop("disabled", false).html("获取验证码"); } else { $("#send-code").html("重新发送(" + count + ")"); } }, 1000); } }); ``` 这段代码将会在用户点击“获取验证码”按钮之后，发送一个 AJAX 请求到 `send_code.php` 页面，然后开始倒计时60秒。在倒计时期间，按钮会显示当前倒计时的秒数，直到倒计时结束。如果用户在倒计时期间再次点击“获取验证码”按钮，该按钮将会被禁用，直到倒计时结束。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

钟Bubble

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值