javascript定时器案例，JavaScript定时器与执行机制介绍

JavaScript定时器案例

JavaScript定时器是一种非常有用的功能，它可以让我们在特定的时间间隔内执行某些操作。在本文中，我们将介绍两个使用JavaScript定时器的案例。

案例一：倒计时

倒计时是一个非常常见的功能，它可以用于各种场合，例如网站上的促销活动、倒计时比赛等。下面是一个简单的倒计时实现：

```javascript

function countdown() {

var now = new Date();

var eventDate = new Date("2022-01-01");

var currentTime = now.getTime();

var eventTime = eventDate.getTime();

var remTime = eventTime - currentTime;

var seconds = Math.floor(remTime / 1000);

var minutes = Math.floor(seconds / 60);

var hours = Math.floor(minutes / 60);

var days = Math.floor(hours / 24);

hours %= 24;

minutes %= 60;

seconds %= 60;

document.getElementById("days").innerHTML = days;

document.getElementById("hours").innerHTML = hours;

document.getElementById("minutes").innerHTML = minutes;

document.getElementById("seconds").innerHTML = seconds;

setTimeout(countdown, 1000);

}

countdown();

```

在这个例子中，我们使用了setTimeout函数来每秒钟更新一次倒计时。我们首先获取当前时间和目标时间，然后计算出剩余时间。接着，我们将剩余时间转换为天、小时、分钟和秒，并将它们显示在网页上。

案例二：轮播图

轮播图是另一个常见的功能，它可以用于展示图片、广告等。下面是一个简单的轮播图实现：

```javascript

var slideIndex = 0;

showSlides();

function showSlides() {

var i;

var slides = document.getElementsByClassName("mySlides");

for (i = 0; i < slides.length; i++) {

slides[i].style.display ="none";

}

slideIndex++;

if (slideIndex > slides.length) {

slideIndex = 1;

}

slides[slideIndex - 1].style.display ="block";

setTimeout(showSlides, 2000);

}

```

在这个例子中，我们使用了setTimeout函数来每两秒钟切换一次图片。我们首先获取所有的图片元素，并将它们隐藏。然后，我们逐个显示图片，并在最后一个图片后返回第一个图片。

JavaScript定时器是一种非常有用的功能，它可以让我们在特定的时间间隔内执行某些操作。在本文中，我们介绍了两个使用JavaScript定时器的案例：倒计时和轮播图。这些案例可以帮助我们更好地理解JavaScript定时器的使用方法。