JavaScript计时器经典案例详解

吃饱了就躺

已于 2024-02-02 15:04:24 修改

阅读量1.1k

点赞数 20

文章标签： javascript

于 2023-11-26 17:17:09 首次发布

本文链接：https://blog.csdn.net/qq_63088307/article/details/134628021

版权

今天给大家分享一下两个javascript的经典案例，分别是5s后关闭广告和发送短信倒计时，这两个案例都是有关于计时器方面的，大家要是能够独立完成这两个案例并且掌握核心内容，那么对计时器方面的知识就有了更大的推进。

1.案例1 -- 5s后关闭广告

2.案例2 -- 发送短信倒计时

3.总结

1.案例1 -- 5s后关闭广告

案例分析：

1.核心思路:5秒之后，就把这个广告隐藏起来

2.用定时器setTimeout

接下来我们来看看核心代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img src="images/news.jpg" alt="" />
    <script>
      // 1.获取事件源
      let img = document.querySelector("img");
      setTimeout(function () {
        // 2.将广告的显示模式赋值为none即隐藏
        img.style.display = "none";
      }, 5000);
    </script>
  </body>
</html>

效果图如下：

以上便是5s后自动关闭广告的小案例，主要思路就是获取事件源img，然后通过定时器setTimeout对img的显示模式进行转换即赋值为none,5000指的是ms即5s。注意，以上的img图片即代表广告作为示例，大家在写的时候记得更换路径。

2.案例2 -- 发送短信倒计时

案例1可能相对比较简单，接下来我们看看发送短信倒计时这个案例，这个案例可能相对上一个案例的进一步加深，其实明白了其中的核心思路也很简单，下面来看看吧。

案例分析：

1.按钮点击之后，会禁用disabled为true
2.同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改

3.里面秒数是有变化的，因此需要用到定时器
4.定义一个变量，在定时器里面，不断递减
5.如果变量为0说明到了时间，我们需要停止定时器，并且复原按钮初始状态。
这里对本案例增加了一个需求，在输入框中获取焦点并且输入手机号码才可启用发送按钮，即按钮颜色变为高亮，否则离开焦点并且为输入任何号码发送按钮被禁用。

接下来我们就来看看代码是如何做到这种效果的吧

<!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>

首先来分析一下这段代码，前面的样式效果我们就直接跳过吧，

第一步肯定是获取事件源，这里要控制的有两个，一个是input输入框，还有一个就是button按钮
其次对输入框添加"blur"事件监听器。当输入框失去焦点时（即鼠标离开输入框），会触发这个事件。如果输入框的值（即输入的号码）不为空，按钮将启用，并添加一个"click"事件监听器。
当按钮被点击时，开始一个倒计时，每秒递减num的值，并更新按钮的文本为当前倒计时的剩余时间。
如果倒计时到0，重置num为60，更新按钮的文本为"发送"，并将按钮重新设为可用状态。同时清除定时器以停止倒计时。
如果输入框的值为空，按钮将被禁用

以上就是js部分的逻辑解释，懂得其中的逻辑相信大家做起来就非常容易。

3.总结

以上两个关于计时器的案例也是我们生活中常见的例子，开始的时候，我拿到这几个案例我也是一脸懵，不知道该如何下手，甚至头脑一点思路没有，半天做不出来，但是你慢慢的回过头来想，这几道案例的核心无非就是setTimeout和setInterval的应用，核心摆在这里，只不过是以另外一种形式出现，但是如果想要精通或者深度理解，这些是远远不够的，我觉得更应该多加练习，打开大脑的思维，js本身就是一门逻辑性语言，没有逻辑做题就无从下手，希望通过这两个案例能够帮助到大家，后续也要更加努力，一起加油吧！！！