如何在 HTML 页面中使用 JavaScript 代码来创建动画效果
时间: 2023-02-25 16:11:32 浏览: 64
在 HTML 页面中使用 JavaScript 创建动画效果的方法如下:
1. 在 HTML 文件中创建一个元素,例如一个 div,并为其设置初始样式。
2. 在 JavaScript 代码中,通过选择该元素并修改它的样式来创建动画效果。
3. 可以使用 JavaScript 内置函数,如 setTimeout() 或 setInterval(),来定时修改该元素的样式,从而实现动画效果。
例如:
```
<div id="myDiv"></div>
<script>
const myDiv = document.getElementById("myDiv");
myDiv.style.backgroundColor = "red";
myDiv.style.height = "100px";
myDiv.style.width = "100px";
let i = 0;
setInterval(function() {
if (i === 0) {
myDiv.style.backgroundColor = "blue";
i = 1;
} else {
myDiv.style.backgroundColor = "red";
i = 0;
}
}, 1000);
</script>
```
在上面的代码中,我们创建了一个名为 "myDiv" 的 div 元素,并通过 setInterval() 函数每隔 1 秒改变它的背景颜色。这样,在浏览器中运行该 HTML 文件时,您将看到 div 元素不断在红色和蓝色之间切换。