怎样用滑快来实现时间的改变


<html>
<head>
<style type="text/css">
#box
{
position:absolute;
top:100px;
left:100px;
width:430px;
height:32px;
z-index:100;
border-style:solid;
border-width:1px;
border-color:#efefef;
padding-top:10px;
}

#box div
{
position:absolute;
background-color:#000000;
border-style:solid;
border-width:0px;
z-index:101;

} #box #line
{
background-color:#a8b8c8;
border-style:solid;
width:100%;
height:5px;
border-width:0;
z-index:10;
font-size:0;
}

span
{
font-size:20px;
position:absolute;
}

</style> <script type="text/javascript">
function $(id)
{
return document.getElementById(id);
} function initialize()
{
$("e1").style.left="0";
$("e1").style.top="0";
$("e1").style.width="10px";
$("e1").style.height="30px";
$("e1").onselectstart=function(){return false;};
$("processValue").style.left=$("box").currentStyle.left;
$("processValue").style.top=parseInt($("box").currentStyle.top)-20;
$("processValue").onselectstart=function(){return false;}; } function areaDrag(box,element)
{
document.onmousemove=startDrag;
document.onmouseup=stopDrag;
var deltaX=event.clientX-(parseInt(box.currentStyle.left)+parseInt(box.currentStyle.borderWidth)+parseInt(element.style.left));
function startDrag()
{
if(event.clientX-deltaX>=parseInt(box.currentStyle.left) && event.clientX-deltaX<=parseInt(box.currentStyle.left)+parseInt(box.currentStyle.width)-parseInt(box.currentStyle.borderWidth)*2-parseInt(element.style.width))
{
element.style.left=event.clientX-parseInt(box.currentStyle.left)-deltaX;
}
else
{
if(event.clientX-deltaX<parseInt(box.currentStyle.left))
{
element.style.left="0";
}
else
{
element.style.left=parseInt(box.currentStyle.width)-parseInt(box.currentStyle.borderWidth)*2-parseInt(element.style.width);
}
}
$("processValue").innerHTML=parseInt((parseInt(element.style.left))/(parseInt(box.currentStyle.width)-parseInt(box.currentStyle.borderWidth)*2-parseInt(element.style.width))*1000)+"ms";
} function stopDrag()
{
document.onmousemove="";
}
}
</script>
</head>

<body onload="initialize()">
<div id="box">
<div onmousedown="areaDrag($('box'),this)" id="e1"></div>
<div id="line"></div>
</div>
<span id="processValue">0ms</span> </body>
</html>