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函数来停止定时器，以停止动画效果。

3. 总结

在本文中，我们对setInterval和clearInterval这两个函数进行了详细讲解，同时提供了两个具体的示例说明。这些示例说明可以帮助读者更好地理解这两个函数的用法，也能够启发读者更多的创意来使用这两个函数实现一些有趣和实用的效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：HTML DOM setInterval和clearInterval方法案例详解 - Python技术站