suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erklärung der Rolle der Pufferbewegung in JS

Detaillierte Erklärung der Rolle der Pufferbewegung in JS

php中世界最好的语言
php中世界最好的语言Original
2018-05-14 14:29:171184Durchsuche

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Rolle von JS bei der Pufferung von Bewegungen geben. Was sind die Vorsichtsmaßnahmen für JS, um Pufferbewegungen zu implementieren?

Beim Puffern muss numerisches Runden und Aufrunden verwendet werden:

Abrunden Math.ceil()Math.floor()

Der Effekt der Verlangsamung der Bewegungsgeschwindigkeit, Bewegungsgeschwindigkeit = (Endposition - Aktueller Standort) / Eine Nummer 

<!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>JS缓冲运动</title>
<style>
#p{
  width:150px;
  height:150px;
  background:#0C6;
  position:absolute;
  left:0;
  top:50px;
}
#p2{
  background:#000;
  height:600px;
  position:absolute;
  left:500px;
  width:2px;
}
</style>
</head>
<script>
var speed;
var time;
window.onload = function(){
  var btn = document.getElementById('btn');
  btn.onclick = function(){
    speed = 0;
    move(500);
  };
  btn2.onclick = function(){
    speed = 0;
    move(0);
  };
};
function move(e){
  var p = document.getElementById('p');
  clearInterval(time);
  time = setInterval(function(){
    //改变位置，如果向左则e==500， 向上取整， 否则向右，向下取整，速度=(终点位置 - 当前位置)/一个数
    e==500 ? speed = Math.ceil((e-(p.offsetLeft))/30):speed = Math.floor((e-(p.offsetLeft))/30)
    if (e <= p.style.left){//达到，关闭定时器
      clearInterval(time);
    }
    else
    {
      p.style.left = p.offsetLeft+speed+&#39;px&#39;;
    }
  },30);
};
</script>
<body>
<input type="button" value="向右运动" id="btn" />
<input type="button" value="向左运动" id="btn2" />
<p id = "p">
</p>
<p id = "p2">
</p>
</body>
</html>
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Implementierung des Vollbild-Scrolling-Plug-Ins in ES6

Wie um die V-Bind-Anweisung in VueJs zu verwenden

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der Rolle der Pufferbewegung in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Schritte zum Aufrufen des Caches zur Implementierung der JS-MethodeNächster Artikel：Detaillierte Erläuterung der Schritte zum Aufrufen des Caches zur Implementierung der JS-Methode

In Verbindung stehende Artikel

Mehr sehen