JavaScript 中的定时器与动画基础

setInterval 和 setTimeout 都是 JavaScript 中的定时器函数，用于在一定的时间间隔后执行函数。

setInterval 函数用于按照指定的时间间隔重复执行一个函数。它接受两个参数，第一个参数是要执行的函数，第二个参数是时间间隔的毫秒数。使用示例：

setInterval(function() {
console.log("Hello World");
}, 1000);
AI写代码
上述示例代码会每隔一秒钟打印一次 "Hello World"。

setTimeout 函数用于延迟一定的时间后执行一个函数。它也接受两个参数，第一个参数是要执行的函数，第二个参数是延迟的毫秒数。使用示例：

setTimeout(function() {
console.log("Hello World");
}, 2000);
AI写代码
上述示例代码会延迟两秒后打印一次 "Hello World"。

对于新手来说，可以利用 setInterval 和 setTimeout 来制作简单的动画效果。例如，可以使用 setInterval 来每隔一定的时间改变一个元素的位置，从而实现移动效果。可以使用 setTimeout 来在一定的时间后显示或隐藏一个元素，从而实现淡入淡出的效果。

以下是一个简单的示例，展示如何使用 setInterval 和 setTimeout 制作一个简单的淡入淡出动画效果：

HTML:

<div id="box"></div>
AI写代码
html
CSS:

#box {
width: 100px;
height: 100px;
background-color: red;
opacity: 0;
transition: opacity 1s;
}
AI写代码
css
JavaScript:

var box = document.getElementById("box");

function fadeIn() {
var opacity = parseFloat(box.style.opacity);
if (opacity < 1) {
opacity += 0.1;
box.style.opacity = opacity;
setTimeout(fadeIn, 100);
}
}

function fadeOut() {
var opacity = parseFloat(box.style.opacity);
if (opacity > 0) {
opacity -= 0.1;
box.style.opacity = opacity;
setTimeout(fadeOut, 100);
}
}

function startAnimation() {
setTimeout(function() {
fadeIn();
setTimeout(function() {
fadeOut();
}, 2000);
}, 2000);
}

startAnimation();
AI写代码
javascript
运行

上述示例代码会先延迟两秒后开始淡入动画，然后再延迟两秒后开始淡出动画，从而实现一个简单的淡入淡出动画效果。
————————————————
版权声明：本文为CSDN博主「好青崧」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/jht_520/article/details/143097789