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 idbox/divAI写代码htmlCSS:#box {width: 100px;height: 100px;background-color: red;opacity: 0;transition: opacity 1s;}AI写代码cssJavaScript: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