js div绕浏览器进行矩形运转,但是每次都会少一点 像旋绕物

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>first</title>
<!--<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>-->
<!--<script src="js/game.js" type="text/javascript"></script>-->
<style>
.box{
position:absolute;
width:50px;
height:50px;
left:0px;
top:0px;
background:#239405;
}
</style>

</head>
<body>
<div id="box" class="box"> </div>
</body>
</html>
<script>
var oDiv = document.getElementById('box');
var end=document.documentElement.clientWidth;
var endy=document.documentElement.clientHeight; 
var n=Math.floor((endy-50)/50);
/*for(var x=1;x<3;x++){
moveright(end,x);
}*/
/*moveright(end,1);
moveright(end,2);*/
var i=1;
moveright(end,i);

function moveright(end,i) {
            var timer = null;
            timer = setInterval(function () {
                var speed = (end - oDiv.offsetLeft) / 15;        
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                //console.log(oDiv.offsetLeft);      
               if (oDiv.offsetLeft>end-50*(i+0.5)) { 
                   clearInterval(timer);                       //当距离小于速度时，让计时器停止
                    oDiv.style.left = end-50*i + 'px';    
                   movedown(endy,i);   
                }
                else {
                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';       //移动DIV
                }
                // console.log(oDiv.offsetLeft);    
            }, 30);
        }     
       function movedown(endy,i) {
            var timer = null;
            timer = setInterval(function () {
                var speed = (endy - oDiv.offsetTop) / 15;      
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  
                if (Math.abs(endy - oDiv.offsetTop-50*i) <= speed){ 
                   clearInterval(timer);                       //当距离小于速度时，让计时器停止
                    oDiv.style.top = endy-50*i + 'px';           //在停止后填充缝隙。
                    moveleft(end,i);
                }
                else {
                    oDiv.style.top = oDiv.offsetTop + speed + 'px';       //移动DIV
                }
            }, 30);    
        }
     function moveleft(end,i){
         var timer = null;         
            timer = setInterval(function () {
                var speed = (oDiv.offsetLeft) / 15;        
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);   
                
               if (Math.abs(oDiv.offsetLeft-50*i) >= speed) {            
                   oDiv.style.left = oDiv.offsetLeft - speed + 'px';             
                }
                else{
                 moveup(endy,i);
                }
            }, 30);
            
     }   
     function moveup(endy,i){
      var timer = null;
            timer = setInterval(function () {
                var speed = (oDiv.offsetTop) / 60;        
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  
               if (Math.abs(oDiv.offsetTop-50*i) >= speed) { 
                  oDiv.style.top = oDiv.offsetTop - speed + 'px';       //移动DIV
                }
             else{
                moveright(end,2);
               }
            }, 30);    
     }  
</script>

解决方案 »

  1.   


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>first</title>
    <!--<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>-->
    <!--<script src="js/game.js" type="text/javascript"></script>-->
    <style>
    .box{
    position:absolute;
    width:50px;
    height:50px;
    left:0px;
    top:0px;
    background:#239405;
    }
    </style>

    </head>
    <body>
    <div id="box" class="box"> </div>
    </body>
    </html>
    <script>
    var oDiv = document.getElementById('box');
    var end=document.documentElement.clientWidth;
    var endy=document.documentElement.clientHeight; 
    var n=Math.floor((endy-50)/50);
    /*for(var x=1;x<3;x++){
    moveright(end,x);
    }*/
    /*moveright(end,1);
    moveright(end,2);*/
    var i=1;
    moveright(end,i);

    function moveright(end,i) {
                var timer = null;
                timer = setInterval(function () {
                    var speed = (end - oDiv.offsetLeft) / 15;        
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    //console.log(oDiv.offsetLeft);      
                   if (oDiv.offsetLeft>end-50*(i+0.5)) { 
                       clearInterval(timer);                       //当距离小于速度时，让计时器停止
                        oDiv.style.left = end-50*i + 'px';    
                       movedown(endy,i);   
                    }
                    else {
                        oDiv.style.left = oDiv.offsetLeft + speed + 'px';       //移动DIV
                    }
                    // console.log(oDiv.offsetLeft);    
                }, 30);
            }     
           function movedown(endy,i) {
                var timer = null;
                timer = setInterval(function () {
                    var speed = (endy - oDiv.offsetTop) / 15;      
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  
                    if (Math.abs(endy - oDiv.offsetTop-50*i) <= speed){ 
                       clearInterval(timer);                       //当距离小于速度时，让计时器停止
                        oDiv.style.top = endy-50*i + 'px';           //在停止后填充缝隙。
                        moveleft(end,i);
                    }
                    else {
                        oDiv.style.top = oDiv.offsetTop + speed + 'px';       //移动DIV
                    }
                }, 30);    
            }
         function moveleft(end,i){
             var timer = null;         
                timer = setInterval(function () {
                    var speed = (oDiv.offsetLeft) / 15;        
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);   
                    
                   if (Math.abs(oDiv.offsetLeft-50*i) >= speed) {            
                       oDiv.style.left = oDiv.offsetLeft - speed + 'px';             
                    }
                    else{
                     moveup(endy,i);
                    }
                }, 30);
                
         }   
         function moveup(endy,i){
          var timer = null;
                timer = setInterval(function () {
                    var speed = (oDiv.offsetTop) / 60;        
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  
                   if (Math.abs(oDiv.offsetTop-50*i) >= speed) { 
                      oDiv.style.top = oDiv.offsetTop - speed + 'px';       //移动DIV
                    }
                 else{
                    moveright(end,2);
                   }
                }, 30);    
         }  
      

  2.   


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>first</title>
    <!--<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>-->
    <!--<script src="js/game.js" type="text/javascript"></script>-->
    <style>
    .box{
    position:absolute;
    width:50px;
    height:50px;
    left:0px;
    top:0px;
    background:#239405;
    }
    </style></head>
    <body>
    <div id="box" class="box"> </div>
    </body>
    </html>
    <script>
    var oDiv = document.getElementById('box');
    var end=document.documentElement.clientWidth;
    var endy=document.documentElement.clientHeight; 
    var n=Math.floor((endy-50)/50);
    /*for(var x=1;x<3;x++){
    moveright(end,x);
    }*/
    /*moveright(end,1);
    moveright(end,2);*/
    var i=1;
    moveright(end,i);function moveright(end,i) {
                var timer = null;
                timer = setInterval(function () {
                    var speed = (end - oDiv.offsetLeft) / 15;        
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    //console.log(oDiv.offsetLeft);      
                   if (oDiv.offsetLeft>end-50*(i+0.5)) { 
                       clearInterval(timer);                       //当距离小于速度时，让计时器停止
                        oDiv.style.left = end-50*i + 'px';    
                       movedown(endy-(50*(i-1)),i);   
                    }
                    else {
                        oDiv.style.left = oDiv.offsetLeft + speed + 'px';       //移动DIV
                    }
                    // console.log(oDiv.offsetLeft);    
                }, 30);
            }     
           function movedown(endy,i) {
                var timer = null;
                timer = setInterval(function () {
                    var speed = (endy - oDiv.offsetTop) / 15;      
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  
                    if (Math.abs(endy - oDiv.offsetTop-50*i) <= speed){ 
                       clearInterval(timer);                       //当距离小于速度时，让计时器停止
                        oDiv.style.top = endy-50*i + 'px';           //在停止后填充缝隙。
                        moveleft(end-(50*(i-1)),i);
                    }
                    else {
                        oDiv.style.top = oDiv.offsetTop + speed + 'px';       //移动DIV
                    }
                }, 30);    
            }
         function moveleft(end,i){
             var timer = null;         
                timer = setInterval(function () {
                    var speed = (oDiv.offsetLeft) / 15;        
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);   
                    
                   if (Math.abs(oDiv.offsetLeft-50*i) > speed) {            
                       oDiv.style.left = oDiv.offsetLeft - speed + 'px';             
                    }
                    else{
                        clearInterval(timer);                       //当距离小于速度时，让计时器停止
                     moveup(endy-(50*(i-1)),i);
                    }
                }, 30);
                
         }   
         function moveup(endy,i){
          var timer = null;
                timer = setInterval(function () {
                    var speed = (oDiv.offsetTop) / 15;        
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  
                   if (Math.abs(oDiv.offsetTop-50*i) > speed) { 
                      oDiv.style.top = oDiv.offsetTop - speed + 'px';       //移动DIV
                    }
                 else{
    clearInterval(timer);                       //当距离小于速度时，让计时器停止
                    moveright(end-(50*(i-1)),++i);
                   }
                }, 30);
         }  
     </script>
    稍微改了改  最后一圈有点错  你自己再看吧。
      

  3.   


    卧槽  竟然不能标红改动的代码  
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>first</title>
    <!--<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>-->
    <!--<script src="js/game.js" type="text/javascript"></script>-->
    <style>
    .box{
    position:absolute;
    width:50px;
    height:50px;
    left:0px;
    top:0px;
    background:#239405;
    }
    </style></head>
    <body>
    <div id="box" class="box"> </div>
    </body>
    </html>
    <script>
    var oDiv = document.getElementById('box');
    var end=document.documentElement.clientWidth;
    var endy=document.documentElement.clientHeight; 
    var n=Math.floor((endy-50)/50);
    /*for(var x=1;x<3;x++){
    moveright(end,x);
    }*/
    /*moveright(end,1);
    moveright(end,2);*/
    var i=1;
    moveright(end,i);function moveright(end,i) {
                var timer = null;
                timer = setInterval(function () {
                    var speed = (end - oDiv.offsetLeft) / 15;        
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    //console.log(oDiv.offsetLeft);      
                   if (oDiv.offsetLeft>end-50*(i+0.5)) { 
                       clearInterval(timer);                       //当距离小于速度时，让计时器停止
                        oDiv.style.left = end-50*i + 'px';    
                       movedown(endy-(50*(i-1)),i);   
                    }
                    else {
                        oDiv.style.left = oDiv.offsetLeft + speed + 'px';       //移动DIV
                    }
                    // console.log(oDiv.offsetLeft);    
                }, 30);
            }     
           function movedown(endy,i) {
                var timer = null;
                timer = setInterval(function () {
                    var speed = (endy - oDiv.offsetTop) / 15;      
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  
                    if (Math.abs(endy - oDiv.offsetTop-50*i) <= speed){ 
                       clearInterval(timer);                       //当距离小于速度时，让计时器停止
                        oDiv.style.top = endy-50*i + 'px';           //在停止后填充缝隙。
                        moveleft(end-(50*(i-1)),i);
                    }
                    else {
                        oDiv.style.top = oDiv.offsetTop + speed + 'px';       //移动DIV
                    }
                }, 30);    
            }
         function moveleft(end,i){
             var timer = null;         
                timer = setInterval(function () {
                    var speed = (oDiv.offsetLeft) / 15;        
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);   
                    
                   if (Math.abs(oDiv.offsetLeft-50*i) > speed) {            
                       oDiv.style.left = oDiv.offsetLeft - speed + 'px';             
                    }
                    else{
                        clearInterval(timer);                       //当距离小于速度时，让计时器停止
                     moveup(endy-(50*(i-1)),i);
                    }
                }, 30);
                
         }   
         function moveup(endy,i){
          var timer = null;
                timer = setInterval(function () {
                    var speed = (oDiv.offsetTop) / 15;        
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  
                   if (Math.abs(oDiv.offsetTop-50*i) > speed) { 
                      oDiv.style.top = oDiv.offsetTop - speed + 'px';       //移动DIV
                    }
                 else{
    clearInterval(timer);                       //当距离小于速度时，让计时器停止
                    moveright(end-(50*(i-1)),++i);
                   }
                }, 30);
         }  
     </script>
      

  4.   


    ipad上可以看到红色标记,电脑不可以.   感谢!