Comment utiliser JS pour implémenter un mouvement de mise en mémoire tampon-js tutoriel-php.cn

Comment utiliser JS pour implémenter un mouvement de mise en mémoire tampon

php中世界最好的语言

Libérer： 2018-06-01 14:19:58

original

1140 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser JS pour implémenter un mouvement de mise en mémoire tampon, et quelles sont les précautions pour utiliser JS pour implémenter un mouvement de mise en mémoire tampon. Voici un cas pratique, jetons un coup d'œil.

La mise en mémoire tampon doit utiliser l'arrondi numérique, l'arrondi vers le haut : Math.ceil() Arrondi vers le bas Math.floor()

L'effet du ralentissement de la vitesse de déplacement, vitesse de déplacement = (position finale - Emplacement actuel) / Un certain nombre

<!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>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser Vux dans un projet Vue

Ouverture et fermeture du menu sans JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!