JavaScript的DOM学习笔记——3、定时器

最新推荐文章于 2025-11-24 03:12:01 发布

原创最新推荐文章于 2025-11-24 03:12:01 发布 · 254 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #笔记 #定时器

H5 专栏收录该内容

46 篇文章

订阅专栏

大家好，我是阿赵。继续学习JavaScript的DOM。这次学习一下DOM里面计时器的用法。

一、 DOM计时器用法

计时器，又成为间歇函数。
作用是能够在固定的时间间隔重复的执行代码。

1、开启定时器

语法：

setInterval(函数,间隔时间)

举例：

let printCount = 0;
function printHello() {
printCount++;
console.log(第${printCount}次打印);
}
setInterval(printHello, 1000);

运行代码后，会发现每隔1秒钟，就会多出一条打印。
在这里插入图片描述

2、关闭定时器

语法：

let 变量名 = setInterval(函数,间隔时间);
clearInterval(变量名)

作用是移除之前已经开启的计时器。
举例：

<body>
  <script>
    let printCount = 0;
    function printHello() {
      printCount++;
      console.log(`第${printCount}次打印`);
      if (printCount >= 5) {
        clearInterval(timeId);
      }
    }
    let timeId = setInterval(printHello, 1000);
  </script>
</body>

结果：
在这里插入图片描述

可以看到，在开启计时器的时候，我用了一个叫做timeId的变量把计时器的id存起来了。然后在程序运行时，当printCount大于5时，就会利用timeId把之前的计时器移除掉。所以打印了5次之后，就不会再打印了。

二、例子

1、阅读倒计时

代码：

<body>
  <div id="title">协议</div>
  <textarea name="" id="content">
  </textarea>
  <button id="btn"></button>
  <script>
    let leftTime = 10;
    function countdownFun() {
      if (leftTime > 0) {
        let btn = document.getElementById('btn');
        btn.innerHTML = `阅读剩余时间:${leftTime}秒`;
        btn.disabled = true;
        leftTime--;
      } else {
        let btn = document.getElementById('btn');
        btn.innerHTML = `我已阅读完毕`;
        btn.disabled = false;
        clearInterval(timeId);
      }
    }
    let timeId = setInterval(countdownFun, 1000);
  </script>
</body>

结果：
在这里插入图片描述

这是一个很常见的用户协议阅读倒计时。在规定的时间内，确认按钮是不能点击的，然后显示剩余的时间倒计时。
在这里插入图片描述

等倒计时完毕后，按钮变成可以操作了。

2、广告轮播图

代码：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #container {
      width: 402px;
      height: 240px;
      background-color: #727272;
    }

    #img {
      width: 400px;
      height: 220px;
      border: 1px solid #ccc;
      padding: 0;
    }

    #pointRoot {
      width: 200px;
      height: 20px;
      transform: translateY(-6px);
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .pointContainer {
      width: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .point {
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: #c0c0c0;
      margin: 0 2px;
      cursor: pointer;
    }

    .active {
      width: 8px;
      height: 8px;
      background-color: rgb(255, 255, 255);
    }
  </style>
</head>


<body>
  <div id="container">
    <img id="img" src="img/news1.png" alt="">
    <div id="pointRoot">
      <div class="pointContainer">
        <span class="point active"></span>
      </div>
      <div class="pointContainer">
        <span class="point"></span>
      </div>
      <div class="pointContainer">
        <span class="point"></span>
      </div>
      <div class="pointContainer">
        <span class="point"></span>
      </div>
      <div class="pointContainer">
        <span class="point"></span>
      </div>

    </div>
  </div>
  <script>
    let currentIndex = 0;
    const maxCount = 5;
    function changeImg() {
      currentIndex++;
      if (currentIndex >= maxCount) {
        currentIndex = 0;
      }
      const img = document.getElementById('img');
      img.src = `img/news${currentIndex + 1}.png`;
      let points = document.getElementsByClassName('point');
      for (let i = 0; i < points.length; i++) {
        points[i].classList.remove('active');
      }
      points[currentIndex].classList.add('active');
    }
    setInterval(changeImg, 2000);
  </script>
</body>

这个例子实现的是网页上经常见到的广告图轮播：
在这里插入图片描述

每隔2秒，广告图会切换到下一张，然后下面的原点也跟着亮起。
说明：
为了模拟轮播图，我简单的制作了几张图片：
在这里插入图片描述

命名是news1-5.png。
当计时器执行的时候，每隔2秒调用一次changeImg，先改变currentIndex ，然后通过currentIndex 组装字符串找到图片的名字，替换图片。
然后下面的小圆点是通过span绘制的，类point会绘制小圆点，然后通过增加删除类active，修改被选中序号的圆点的样式。

在这里插入图片描述