這個練習是要作一個數值調整條。長條上有一個鈕，用滑鼠右鍵按著鈕，然後左右移動，就可以改變值。這個練習用到以下特徵與方法。
- DIV：用來定義父區塊與子區塊。
- position：可以定義區塊佈局的方式。父區塊必須設成 relative，子區塊則設成 absolute。
- getElementById()：利用識別名取得元素的物件。
- style 物件：元素的風格物件，利用此物件讀取或設定子區塊的 left 就能移動子區塊。
- parentNode：取得父元素的物件。
- clientWidth：取得父區塊的寬。
- 程式用法：
<script type='text/javascript'>
var msdw=false;
var eventX=0;
function setVal( e, o )
{
if(!msdw) return;
var e = e || window.event;
var vo=document.getElementById('val');
var os=o.style;
if( os.left=='' ) os.left='0px';
var w=parseInt(o.parentNode.clientWidth);
var x=parseInt(os.left);
var ex=parseInt(e.clientX);
if( x >= 0 && x <= w )
{
x+=(ex-eventX);
eventX=ex;
if( x < 0 ) x=0;
if( x > w ) x=w;
vo.value=x;
os.left=x+'px';
}
}
function msDown(e, o )
{
var e = e || window.event;
eventX=parseInt(e.clientX);
msdw=true;
}
</script>
<style type='text/css'>
#bar {position:relative;
width:300px;
height:24px;
background:#339;
}
#bar .btn
{position:absolute;
width:24px;
height:24px;
background:red;
}
</style>
<div id=bar>
<div class=btn onmousedown='msDown(event, this )'
onmouseup='msdw=false'
onmouseout='msdw=false'
onmousemove='setVal(event, this)'>
</div>
</div>
<p><input id=val size=12> - 執行結果：
- 用滑鼠按著上面的紅色小方塊，然後左右移動，就可以改變值。
