在JavaScript中使用timer示例

2023年5月27日下午2:53 • JavaScript

下面是关于在JavaScript中使用timer的完整攻略：

什么是 Timer？

在 JavaScript 中， Timer 用于将一个代码块延迟一段时间后执行，或者每隔一段时间就重复执行。Timer 有两种类型：setTimeout()和setInterval()。

setTimeout()

setTimeout()方法可用于延迟一次性执行代码的执行。可以传递两个参数：一个函数（代码块）和一个时间（毫秒）。代码块将在指定的时间后执行。

下面是一个 setTimeout() 的实例，它将在 3 秒后弹出窗口：

setTimeout(function(){
    alert("3 秒已过！");
}, 3000);

setInterval()

setInterval() 方法可用于在指定时间间隔内重复执行代码。可以传递两个参数：一个函数（代码块）和一个时间（毫秒）。代码块将在每个指定时间间隔后执行。

下面是一个 setInterval() 的实例，它将在每 1 秒后弹出窗口：

setInterval(function(){
    alert("1 秒已过！");
}, 1000);

在网页中使用 Timer

下面示例说明如何在网页中使用定时器。

示例 1: 点击按钮改变文本

以下示例展示了如何用 setTimeout() 方法在页面上延迟输出文本。文本在用户点击的按钮上更改。当用户点击按钮时，将弹出一个含有“Hello World”的消息框。在3秒后，文本将更改为“这是由 JavaScript 更改的文本!”。文本修改后将立即使消息框消失。

<!DOCTYPE html>
<html>
<body>

<h1 id="myText">这是一个标题!</h1>

<button onclick="myFunction()">点击我</button>

<script>
function myFunction() {
  document.getElementById("myText").innerHTML = "这是由 JavaScript 更改的文本!";
  setTimeout(function(){ document.getElementById("myText").innerHTML = "这是一个标题!"; }, 3000);
}
</script>

</body>
</html>

示例 2: 自动滚动图片

以下示例展示了如何用 setInterval() 方法创造一个幻灯片式的图像滚动。该图片可以通过以下方式来加载。

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

#container img {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 1s ease-in-out;
}
</style>
</head>
<body>

<div id="container">
  <img src="https://via.placeholder.com/300x300?text=1">
  <img src="https://via.placeholder.com/300x300?text=2">
  <img src="https://via.placeholder.com/300x300?text=3">
</div>

<script>
var currentImageIndex = 0;
var images = document.getElementsByTagName("img");

setInterval(function(){
  currentImageIndex++;
  if(currentImageIndex >= images.length){
    currentImageIndex = 0;
  }

  for(var i = 0; i < images.length; i++){
    images[i].style.opacity = 0;
  }

  images[currentImageIndex].style.opacity = 1;
}, 3000);
</script>

</body>
</html>

以上示例在每 3 秒自动滚动图片。您可以在示例中增加或减少图片数量，增加或减少时间间隔以适应特定应用场景。

希望以上攻略能对您有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：在JavaScript中使用timer示例 - Python技术站