JavaScript计时器经典案例短信倒计时详解

小李学废了

于 2023-12-06 14:44:01 发布

阅读量64

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2301_78596239/article/details/134830844

版权

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    手机号码： <input type="number" /> <button disabled>发送</button>
    <script>
      // 获取元素
      let inputEle = document.querySelector("input");
      let btn = document.querySelector("button");
      let num = 60; //计数器
      // input添加事件---input输入事件
      inputEle.addEventListener("blur", function () {
        // 如果输入框的值为空，按钮禁用，否则启用
        if (this.value) {
          btn.disabled = false; // 启用
          btn.addEventListener("click", function () {
            let t = setInterval(function () {
              num--;
              btn.innerText = num + "秒后重新发送";
              if (num == 0) {
                btn.innerText = "发送";
                num = 60; //重置计数器
                btn.disabled = false;
                clearInterval(t); //清除定时器
              }
            }, 1000);
          });
        } else {
          btn.disabled = true; // 禁用
        }
      });
    </script>
  </body>
</html>

结果展示：

案例分析：

1、首先搭建基本框架：由文字“手机号码：”、数字输入框（input）、发送按钮（button）组成

 手机号码： <input type="number" /> <button disabled>发送</button>

2、js部分：

2.1、获取元素、定义计时器

// 获取元素
      let inputEle = document.querySelector("input");
      let btn = document.querySelector("button");
      let num = 60; //计数器

2.2、添加事件---input输入事件：

 inputEle.addEventListener("blur", function () {
        // 如果输入框的值为空，按钮禁用，否则启用
        if (this.value) {
          btn.disabled = false; // 启用
          btn.addEventListener("click", function () {
            let t = setInterval(function () {
              num--;
              btn.innerText = num + "秒后重新发送";
              if (num == 0) {
                btn.innerText = "发送";
                num = 60; //重置计数器
                btn.disabled = false;
                clearInterval(t); //清除定时器
              }
            }, 1000);
          });
        } else {
          btn.disabled = true; // 禁用
        }
      });