這個練習是要將兩個子區塊不停的移動，但是不會超出父區塊的範圍。這個練習用到以下特徵與方法。
- DIV：用來定義父區塊與子區塊，子區塊中可以放文字或圖片。
- position：可以定義區塊佈局的方式。父區塊必須設成 relative，子區塊則設成 absolute。
- getElementById()：利用識別名取得元素的物件。
- getElementsByTagName()：利用標籤名取得元素物件的清單。使用時要注意 IE 沒有 getElementsByClassName() 這個方法。
- style 物件：元素的風格物件，利用此物件讀取或設定子區塊的 top, left 就能移動子區塊。
- clientHeight, clientWidth：取得父區塊的寬與高。
- setTimeout()：設定變化的時間間隔。
- setBall()：此函式會設定 ball 類別區塊的開始位置。
- moveBall()：此函式會移動 ball 類別區塊。
- 程式用法：
<style type='text/css'>
#board {position:relative;
width:300px;
height:300px;
background:#339;
}
#board .ball
{position:absolute;
width:24px;
height:24px;
background:white;
color:red;
}
</style>
<div id=board>
<div class=ball>B</div>
<div class=ball>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqDFS_lYt9n3mbIJu2gbYu2bZXspHAZUiTPq7sMN3abjxNP5tgQJ3lvamcEExZat-tqvDaPHwV_ZvSts9x9ctDigzxPikj_ZtPGuZaMSy8_ohD-6LagHTrmoxA6EinHSM9O7ILXhjs1szm/s200/ant.GIF">
</div>
</div>
<script type='text/javascript'>
var balls=[[2,2],[2,2]];
function moveBall(id)
{
var o=document.getElementById(id);
var w=parseInt(o.clientWidth)-24;
var h=parseInt(o.clientHeight)-24;
for(var i=0; i < balls.length; i++)
{var bo=balls[i][2];
var px=parseInt(bo.left);
var py=parseInt(bo.top);
px+=balls[i][0];
if(px > w || px < 0) balls[i][0]=-balls[i][0];
py+=balls[i][1];
if(py > h || py < 0) balls[i][1]=-balls[i][1];
bo.top=py+'px';
bo.left=px+'px';
}
setTimeout('moveBall("'+id+'")', 20);
}
function setBall(id)
{
var bs=document.getElementById(id).getElementsByTagName('div');
var bo=bs[0].style;
balls[0][2]=bo;
bo.top='10px';
bo.left='100px';
bo=bs[1].style;
balls[1][2]=bo;
bo.top='200px';
bo.left='10px';
}
setBall("board");
moveBall("board");
</script> - 執行結果：B
