Анимировать окно, отскакивая влево и вправо


Я написал следующий код для перемещения окна на правом и вернуть его влево, и повторить это действие навсегда.

Этот код работает, но есть ли лучшее решение?

function move(){
 let box = document.getElementById("box");
 if(box.style.left.replace("px","") < 180 && check == true){
   moveRight(box);
  }else if (box.style.left.replace("px","") == 180 || check == false)
    {

      if(box.style.left.replace("px","") > 0){
          check = false;
          moveleft(box);
      }else if (box.style.left.replace("px","") == 0){
            check = true;
        }
    }
}
function moveRight(box){
   if(box.style.left != ""){
     let temp = box.style.left.replace("px","");
     temp = parseInt(temp);
     box.style.left = temp+1+"px";
   }else{box.style.left = "1px";}
}
function moveleft(box){
   if(box.style.left != ""){
     let temp = box.style.left.replace("px","");
     temp = parseInt(temp);
     box.style.left = temp-1+"px";
   }else{box.style.left = "1px";}
}
var check = true;
setInterval(move,10);
#plan{
        width: 200px;
        height: 200px; 
  background: #00C0FF;
        position: relative;
 }
 #box{
     width: 20px;
  height: 20px;
  background: red;
        position: absolute;
  
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <div id="plan">
  <div id="box"></div>
 </div>
</body>
</html>



1362
2
задан 7 февраля 2018 в 09:02 Источник Поделиться
Комментарии
1 ответ

Пожалуйста, позаботьтесь, чтобы использовать последовательное отступ для кода JavaScript, HTML и CSS. В частности, не смешивать пробелы и символы табуляции.

Избегайте использования бессмысленные имена переменных, такие как check и temp. В этом случае, вам даже не нужно temp, потому что:


Если parseInt встречает символ, не являющийся цифрой в указанной системе счисления, то игнорирует его и все последующие символы и возвращает целочисленное значение разобранное до точки. parseInt усекает число до целого значения. Допускается ведущие и конечные пробелы.

Ваш sleep() функция представляется неиспользованной. В любом случае, вы должны избежать while цикл, который просто отходы питания процессора; setInterval() и setTimeout() гораздо более адекватные способы управления временем. На дом-обновления и анимации, хотя, вы должны использовать requestAnimationFrame().

Всю проблему можно решить с помощью CSS-анимации, которые поддерживаются большая часть современных браузерах. В самом деле, набор браузеров, которые поддерживают let сайта (который вы использовали) является подмножеством браузерах, которые поддерживают CSS-анимации.



@keyframes slide {
from { left: 0; }
to { left: 180px; /* 200px - 20px */ }
}

#plan {
width: 200px;
height: 200px;
background: #00C0FF;
position: relative;
}

#box {
width: 20px;
height: 20px;
background: red;
position: absolute;
animation: 3.6s linear infinite alternate slide;
}


<div id="plan"><div id="box"></div></div>



3
ответ дан 7 февраля 2018 в 09:02 Источник Поделиться