javascript - 缓冲运动中为什么第二次运动的时候会停在中间位置左右晃动？-PHP中文网问答

为什么不足取整后还会出现这种现象？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style>
#p1{width:100px;height:100px;background:red;position:absolute;}
</style>


<script>
window.onload = function()
{
    var op = document.getElementById('p1');
    var oBtn= document.getElementById('btn');
    oBtn.onclick = move;
};
  var i=0;
function move()
{  i++;
   if(i%2==1){
     var timer = null
   timer = setInterval(function()
  {
        var op = document.getElementById('p1');
        var speed = (80-op.offsetLeft)/8;
        speed = speed > 0?Math.ceil(speed) : Math.floor(speed);
        op.style.left = op.offsetLeft + speed + 'px';
   
},30)}
   else{
    timerr=setInterval(function()
  {
        var op = document.getElementById('p1');
        var speed = (0-op.offsetLeft)/8;
        speed = speed > 0?Math.ceil(speed) : Math.floor(speed);
        op.style.left = op.offsetLeft + speed + 'px';
        document.title=op.offsetLeft+','+speed;
},30)
   }
      
    }
</script>


</head>

<body>
<input type="button" value="move" id="btn"/>


<p id="p1"></p>


</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #p1{width:100px;height:100px;background:red;position:absolute;} </style> <script> window.onload = function() { var op = document.getElementById('p1'); var oBtn= document.getElementById('btn'); oBtn.onclick = move; }; var i=0; var timer = null function move() { clearInterval(timer); i++; if(i%2==1){ timer = setInterval(function() { var op = document.getElementById('p1'); var speed = (80-op.offsetLeft)/8; speed = speed > 0?Math.ceil(speed) : Math.floor(speed); if (speed == 0) {clearInterval(timer);}; op.style.left = op.offsetLeft + speed + 'px'; },30)} else{ timer=setInterval(function() { var op = document.getElementById('p1'); var speed = (0-op.offsetLeft)/8; speed = speed > 0?Math.ceil(speed) : Math.floor(speed); if (speed == 0) {clearInterval(timer);}; op.style.left = op.offsetLeft + speed + 'px'; document.title=op.offsetLeft+','+speed; },30) } } </script> </head> <body> <input type="button" value="move" id="btn"/> <p id="p1"></p> </body> </html>