JavaScript：使用网络动画-定期重复一个动作_javascript网页制作一个不断重复的加载动画-CSDN博客

本文链接：https://blog.csdn.net/kllo__/article/details/123047435

在本节中，将学习如何使用定时器修改元素的内容，下面给出例子：

<html>
 <head>
 </head>
 <body>
	<h1 id="title">This page will self-destruct in <span id="counter">10</span> second(s)...</h1>
 </body>
</html>

// Count down the counter
const decreaseCounter = () => {
  // Convert counter text to a number
  const counter = Number(counterElement.textContent);
  // Decrease counter by one
  counterElement.textContent = counter - 1;
};

const counterElement = document.getElementById("counter");

// Call the decreaseCounter function every second (1000 milliseconds)
setInterval(decreaseCounter, 1000);

现在的显示效果为：

但是这个倒计时不会停止。

开始一个重复动作

JavaScript 定义了一个名为 decreaseCounter() 的函数，该函数访问一个名为 counter 的 HTML 元素的值，然后逐个减少它的值。

在函数代码中调用 Number() 强制转换函数：它将计数器字符串转换为数字，这赋予了它减法功能。

调用 setInterval() 函数会触发一个重复的操作。这个函数允许你定期调用一个函数。它的参数是要调用的函数和每次调用的间隔时间（以毫秒为单位）。返回值是重复操作的 ID，可以用来进一步修改该操作。

调用格式如下：

// Set up a repeated action
const intervalId = setInterval(callbackFunction, timeBetweenEachCall);

停止重复动作

让我们试着在倒计时结束后停止计数器。我们还将修改页面的文本。下面是我们示例的 JavaScript 代码，更新后将生成我们想要的结果：

// Count down the counter until 0
const decreaseCounter = () => {
  // Convert counter text to a number
  const counter = Number(counterElement.textContent);
  if (counter > 1) {
    // Decrease counter by one
    counterElement.textContent = counter - 1;
  }
  else {
    // Cancel the repeated execution
    clearInterval(intervalId);
    // Modify the page title
    const title = document.getElementById("title");
    title.textContent = "BOOM!!";
  }
};

const counterElement = document.getElementById("counter");

// Call the decreaseCounter function every second (1000 milliseconds)
const intervalId = setInterval(decreaseCounter, 1000);

倒计时结束后将显示如下：

在 decreaseCounter() 函数中，只有当当前值大于 1 时才会减小计数器。如果不是，我们调用函数 clearInterval() ，然后修改页面的标题。clearInterval() 函数将终止重复的代码执行。它以调用 setInterval() 函数所返回的动作的 ID 作为参数。

使用的格式如下：

// Cancel a repeated action set up with setInterval()
clearInterval(intervalId);

延迟触发动作

假如你想在前面示例中的“BOOM”之后修改页面文本，修改示例将如下：

// Count down the counter until 0
const decreaseCounter = () => {
  // Convert counter text to a number
  const counter = Number(counterElement.textContent);
  if (counter > 1) {
    // Decrease counter by one
    counterElement.textContent = counter - 1;
  }
  else {
    // Cancel the repeated execution
    clearInterval(intervalId);
    // Modify the page title
    const titleElement = document.getElementById("title");
    titleElement.textContent = "BOOM!!";
    // Modify the title after 2 seconds
    setTimeout(() => {
      titleElement.textContent = "Everything's broken now :(";
    }, 2000);
  }
};

const counterElement = document.getElementById("counter");

// Call the decreaseCounter function every second (1000 milliseconds)
const intervalId = setInterval(decreaseCounter, 1000);

输出结果：

一旦倒计时结束，我们调用 setTimeout() 函数在 2 秒（2000毫秒）延迟后设置一个新页面标题。setTimeout() 函数允许你在特定的延迟（以毫秒为单位）之后执行一次函数。

调用格式如下：

// Execute an action once, after a delay
setTimeout(callbackFunction, timeBeforeCall);