動畫
現(xiàn)在我們知道如何選擇和更改DOM元素，我們可以創(chuàng)建一個簡單的動畫。
讓我們創(chuàng)建一個簡單的HTML頁面，其中包含將使用JS動畫的框元素。
<style>
#container {
width: 400px;
height: 400px;
background: green;
position: relative;
}
#box {
width: 30px;
height: 30px;
background: red;
position: absolute;
}
</style>
<div id="container">
<div id="box"> </div>
</div>我們的box元素在容器元素的內(nèi)部。注意用于元素的 position 屬性：
容器是相對的，盒子是絕對的。這將允許我們創(chuàng)建相對于容器的動畫。
我們將動畫紅色框，使其移動到容器的右側(cè)。
提示: 您需要熟悉CSS才能更好地理解提供的代碼。
動畫
要創(chuàng)建動畫，我們需要以較小的時間間隔更改元素的屬性。
我們可以通過使用 setInterval() 方法來實(shí)現(xiàn)這一點(diǎn)，它允許我們創(chuàng)建一個定時器并調(diào)用一個以定義的間隔（以毫秒為單位）反復(fù)更改屬性的函數(shù)。
例如:
var t = setInterval(move, 500);
此代碼創(chuàng)建一個每500毫秒調(diào)用一個 move() 函數(shù)的計(jì)時器。
現(xiàn)在我們需要定義 move() 函數(shù)，改變框的位置。
// 定義開始的位置
var pos = 0;
// 獲取box元素
var box = document.getElementById("box");
function move() {
pos += 1;
box.style.left = pos+"px"; //px = pixels
}提示: move() 函數(shù)在每次調(diào)用時將box元素的left屬性增加1。
動畫
以下代碼定義了每10毫秒調(diào)用 move() 函數(shù)的定時器：
var t = setInterval(move, 10);
然而，這使得我們的盒子永遠(yuǎn)向右移動。要在盒子到達(dá)容器的末端時停止動畫，我們向 move() 函數(shù)添加一個簡單的檢查，并使用 clearInterval() 方法來停止定時器。
function move() {
if(pos >= 370) {
clearInterval(t);
}
else {
pos += 1;
box.style.left = pos+"px";
}
}當(dāng)箱子的 left 屬性到值400時，盒子到達(dá)容器的末端，容器寬度為400px，盒子寬為30px 。
var pos = 0;
// 盒子元素
var box = document.getElementById("box");
var t = setInterval(move, 10);
function move() {
if(pos >= 370) {
clearInterval(t);
}
else {
pos += 1;
box.style.left = pos+"px";
}
}提示: 恭喜，您剛剛創(chuàng)建了您的第一個JavaScript動畫！
