JavaScript实现短信倒计时60s

2023年5月27日下午4:29 • JavaScript

当需要在网页中添加短信验证码的时候，我们通常需要一个倒计时的功能，限制60秒内只允许重新获取一次验证码。下面是JavaScript实现短信倒计时60s的攻略。

1. 倒计时基础框架

我们先来搭建倒计时的基本框架，HTML代码如下：

<button id="btn">获取验证码</button>

需要注意的是，这里的按钮id为“btn”，可以根据实际情况修改。

接下来，我们在JavaScript中获取该元素，并倒计时，在倒计时结束后恢复按钮的状态。

var btn = document.getElementById("btn");
var countdown = 60;

function settime(obj) {
  if (countdown == 0) {
    obj.removeAttribute("disabled");
    obj.innerText = "获取验证码";
    countdown = 60;
    return;
  } else {
    obj.setAttribute("disabled", true);
    obj.innerText = "重新发送(" + countdown + ")";
    countdown--;
  }
  setTimeout(function () {
    settime(obj);
  }, 1000);
}

2. 添加点击事件

在点击按钮的时候，我们需要触发倒计时函数。因此，我们需要在JavaScript中添加一个点击事件：

btn.addEventListener("click", function () {
  settime(this);
});

示例1：完整代码

接下来是完整代码示例1：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>短信验证码倒计时</title>
</head>

<body>
  <button id="btn">获取验证码</button>
  <script>
    var btn = document.getElementById("btn");
    var countdown = 60;

    function settime(obj) {
      if (countdown == 0) {
        obj.removeAttribute("disabled");
        obj.innerText = "获取验证码";
        countdown = 60;
        return;
      } else {
        obj.setAttribute("disabled", true);
        obj.innerText = "重新发送(" + countdown + ")";
        countdown--;
      }
      setTimeout(function () {
        settime(obj);
      }, 1000);
    }

    btn.addEventListener("click", function () {
      settime(this);
    });
  </script>
</body>

</html>

示例2：jQuery实现

除了原生JavaScript，我们也可以使用jQuery实现短信验证码倒计时，如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>短信验证码倒计时</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <button id="btn">获取验证码</button>
  <script>
    var countdown = 60;

    function settime(obj) {
      if (countdown == 0) {
        obj.removeAttr("disabled");
        obj.text("获取验证码");
        countdown = 60;
        return;
      } else {
        obj.attr("disabled", true);
        obj.text("重新发送(" + countdown + ")");
        countdown--;
      }
      setTimeout(function () {
        settime(obj);
      }, 1000);
    }

    $('#btn').click(function () {
      settime($(this));
    });
  </script>
</body>

</html>

需要注意的是，在使用jQuery之前，需要先引入jQuery库。通过与之前的原生JavaScript对比，可以发现，在使用jQuery实现倒计时的时候，只需要在选择器中传入字符串形式的id，即可选择按钮元素。另外，jQuery中的获取属性和设置属性分别使用“removeAttr”和“attr”函数，以及“text”函数用于设置对应的文本内容。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现短信倒计时60s - Python技术站