螞蟻的 JavaScript: 可調整數值的長條

2009年2月27日

可調整數值的長條

這個練習是要作一個數值調整條。長條上有一個鈕，用滑鼠右鍵按著鈕，然後左右移動，就可以改變值。這個練習用到以下特徵與方法。

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>

用滑鼠按著上面的紅色小方塊，然後左右移動，就可以改變值。