关键词

JavaScript实现短信倒计时60s

当需要在网页中添加短信验证码的时候,我们通常需要一个倒计时的功能,限制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”函数用于设置对应的文本内容。

本文链接:http://task.lmcjl.com/news/8231.html

展开阅读全文