JavaScript HTML DOM 动画
学习创造 HTML 动画 启用 JavaScript。
基本网站
为了演示如何使用 JavaScript 创建 HTML 动画，我们将使用一个简单的网页：
屁股
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 JavaScript 动画</h1>
<div id="animation">这可能是我的动画</div>
</body>
</html>
创建动画容器
所有动画都与容器元素关联。
屁股
<div id ="container">
<div id ="animate">这是我的动画</div>
</div>
风格化元素
Елемент контейнера має бути створений зі стилем = "position: relative".
Елемент анімації має бути створений зі стилем = "position: absolute".
动画代码
编写 JavaScript 脚本来提高工作效率并减少代码量。
使用计时器进行更改。 如果计时器间隔较小，动画将不会中断。
基本代码：
屁股
id = 设置间隔（帧，5）；
函数框架（）{
if (/* 判断是否正确 */) {
清除间隔（id）；
} 别的 {
/* код для зміни стилю елемента */
}
}
使用 JavaScript 创建新动画
屁股
函数 myMove() {
让 id = null;
const elem = document.getElementById("动画");
让 pos = 0;
清除间隔（id）；
id = 设置间隔（帧，5）；
函数框架（）{
如果 (pos == 350) {
清除间隔（id）；
} 别的 {
正++；
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
自己尝试一下»
