HTML DOM setInterval和clearInterval方法案例详解

2023年6月11日下午1:14 • JavaScript

下面我将详细讲解“HTML DOM setInterval和clearInterval方法案例详解”的完整攻略。

1. 回顾setInterval和clearInterval的概念

在深入讲解之前，我们需要先了解setInterval和clearInterval两个函数的基本概念。

setInterval：可以重复执行一个函数或一段代码，在规定的时间间隔内不断地执行，直到被 clearInterval 方法停止。
clearInterval：用于停止 setInterval 方法设置的 timer。

2. setInterval和clearInterval示例演示

2.1. 示例一：使用setInterval实现倒计时

在这个示例中，我们将使用setInterval函数实现一个简单的倒计时效果。具体代码如下：

<!DOCTYPE html>
<html>
<body>

<p>倒计时: <span id="demo"></span></p>

<script>
// 倒计时剩余时间
var countDownTime = 60;

// 更新倒计时
function updateCountDown() {
  if (countDownTime == 0) {
    clearInterval(intervalId);
    document.getElementById("demo").innerHTML = "时间到！";
  } else {
    document.getElementById("demo").innerHTML = countDownTime;
    countDownTime--;
  }
}

// 设置定时器
var intervalId = setInterval(updateCountDown, 1000);

</script>

</body>
</html>

在这个例子中，我们先定义了一个变量countDownTime来表示倒计时的剩余时间，初始值设为60，代表倒计时60秒。然后我们定义了一个函数updateCountDown，这个函数用来更新倒计时，并且在倒计时结束后清除定时器。接下来我们使用setInterval函数来设置定时器，每隔1秒执行一次updateCountDown函数。最后，当倒计时结束后，我们使用clearInterval函数来清除定时器，并显示“时间到！”提示。

2.2. 示例二：使用clearInterval停止动画效果

在这个示例中，我们将使用setInterval函数来实现一个简单的动画效果，并且使用clearInterval函数来停止这个动画效果。具体代码如下：

<!DOCTYPE html>
<html>
<body>

<button onclick="startAnimation()">开始动画</button>
<button onclick="stopAnimation()">停止动画</button>

<br><br>

<div id="animate"></div>

<script>
// 开始动画
function startAnimation() {
  var pos = 0;
  var intervalId = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(intervalId);
    } else {
      pos++;
      document.getElementById("animate").style.left = pos + 'px';
    }
  }
}

// 停止动画
function stopAnimation() {
  clearInterval(intervalId);
}

</script>

<style>
#animate {
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
  animation: mymove 5s infinite;
  animation-direction: alternate;
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 350px;}
}
</style>

</body>
</html>

在这个例子中，我们先定义了两个按钮，一个用来启动动画，另一个用来停止动画。当用户点击“开始动画”按钮时，我们会调用startAnimation函数。这个函数里面的代码使用了setInterval函数来实现一个50像素宽、50像素高、红色背景、左边距为0的div块向右平移。我们使用一个名为pos的变量来跟踪div块的位置，初始值设为0，然后我们使用一个匿名函数来实现帧动画效果，每5毫秒向右移动一个像素，直到pos达到350。当pos等于350时，我们使用clearInterval函数来停止定时器，以停止动画效果。在stopAnimation函数中，我们同样使用clearInterval函数来停止定时器，以停止动画效果。