<!DOCTYPE?html>
<meta?charset="utf-8">
<head>
<title></title>
<style?type="text/css">
#div1{width:?100px;?height:?100px;?background-color:?red;?position:absolute;?left:?900px;top:?50px;}
#div2{width:?1px;height:?300px;background-color:?black;?position:?absolute;?left:?300px;top:?0px;}
#div3{width:?1px;height:?300px;background-color:?black;?position:?absolute;?left:?800px;top:?0px;}
</style>
<script?type="text/javascript">
window.onload?=?function()
{
var?oDiv1?=?document.getElementById('div1');
var?oBtn1??=?document.getElementById('btn1');
var?oBtn2??=?document.getElementById('btn2');
var?timer?=?null;
oBtn1.onclick?=?function()
{
startMove(300);
}
oBtn2.onclick?=?function()
{
startMove(800);
}
function?startMove(iTarget)
{
var?oDiv1?=?document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var?speed?=?0;
if?(oDiv1.offsetLeft<iTarget)?
{
speed?=?7;
}
else
{
speed?=?-7;
}
if(Math.abs(iTarget-oDiv1.offsetLeft<=7))
{
clearInterval(timer);
oDiv1.style.left?=?iTarget+'px';
}
else
{
oDiv1.style.left?=?oDiv1.offsetLeft+speed+'px';
}
},30)
}
}
</script>
</head>
<body>
<input?id="btn1"?type="button"?value="到300"?/>
<input?id="btn2"?type="button"?value="到800"?/>
<div?id="div1">
</div>
<div?id="div2">
</div>
<div?id="div3">
</div>
</body>
</html>
這個JavaScript程序為什么把方塊向右移就可以緩慢移，向左移就很快速？
簡若婷
2017-06-16 13:04:13