前言
js學(xué)習(xí)ing，form（w3c上js微課）
動(dòng)畫(huà)
現(xiàn)在我們知道如何選擇和更改DOM元素拄轻，我們可以創(chuàng)建一個(gè)簡(jiǎn)單的動(dòng)畫(huà)婚度。
讓我們創(chuàng)建一個(gè)簡(jiǎn)單的HTML頁(yè)面，其中包含將使用JS動(dòng)畫(huà)的框元素进宝。
<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 屬性：
容器是相對(duì)的，盒子是絕對(duì)的党晋。這將允許我們創(chuàng)建相對(duì)于容器的動(dòng)畫(huà)谭胚。
我們將會(huì)動(dòng)畫(huà)紅色框，使其移動(dòng)到容器的右側(cè)未玻。
步驟
要?jiǎng)?chuàng)建動(dòng)畫(huà)灾而，我們需要以較小的時(shí)間間隔更改元素的屬性。
我們可以通過(guò)使用?setInterval()?方法來(lái)實(shí)現(xiàn)這一點(diǎn)扳剿，它允許我們創(chuàng)建一個(gè)定時(shí)器并調(diào)用一個(gè)以定義的間隔（以毫秒為單位）反復(fù)更改屬性的函數(shù)旁趟。
例如：
var t = setInterval(move, 500);?
此代碼創(chuàng)建一個(gè)每500毫秒調(diào)用一個(gè)move()函數(shù)的計(jì)時(shí)器。
現(xiàn)在我們需要定義move()?函數(shù)舞终，改變框的位置轻庆。
// 定義開(kāi)始的位置
var pos = 0;
// 獲取box元素
var box = document.getElementById("box");
function move() {
? pos += 1;
? box.style.left = pos+"px";? ? ? ?//px = pixels
}
注意：提示:?move()?函數(shù)在每次調(diào)用時(shí)將box元素的left屬性增加1。
document 對(duì)象
document對(duì)象是文檔的根節(jié)點(diǎn)敛劝，window.document屬性就指向這個(gè)對(duì)象余爆。也就是說(shuō)，只要瀏覽器開(kāi)始載入HTML文檔夸盟，這個(gè)對(duì)象就開(kāi)始存在了蛾方，可以直接調(diào)用。
JavaScript中有一個(gè)預(yù)定義的 document 對(duì)象，可用于訪(fǎng)問(wèn)DOM上的所有元素桩砰。
換句話(huà)說(shuō)拓春，文檔對(duì)象是網(wǎng)頁(yè)中所有對(duì)象的所有者（或根）。
因此亚隅，如果要訪(fǎng)問(wèn)HTML頁(yè)面中的對(duì)象硼莽，則始終訪(fǎng)問(wèn)?document?對(duì)象。
例如:
document.body.innerHTML = "Some text";
由于 body 是 DOM 的元素煮纵，因此我們可以使用 document 對(duì)象訪(fǎng)問(wèn)它并更改 innerHTML 屬性的內(nèi)容懂鸵。
