Examinons d'abord le code précédent de mouvement uniforme. Quel type de bug se produira après avoir modifié la vitesse. Voici deux repères pour les tests
La copie de code est la suivante:
<style type = "text / css">
# div1 {
Largeur: 100px;
hauteur: 100px;
Position: absolue;
Contexte: rouge;
en haut: 50px;
Gauche: 600px;
}
# div2 {
Largeur: 1px;
hauteur: 300px;
Position: absolue;
Gauche: 300px;
en haut: 0;
Contexte: noir;
}
# div3 {
Largeur: 1px;
hauteur: 300px;
Position: absolue;
Gauche: 100px;
en haut: 0;
Contexte: noir;
}
</ style>
<script type = "text / javascript">
var time = null;
fonction startmove (itarget) {
var odiv = document.getElementById ("div1");
ClearInterval (temps);
time = setInterval (function () {
Var Speed = 0;
if (odiv.offsetleft <itarget) {
vitesse = 7;
} autre {
vitesse = -7;
}
// En fait, il y a un problème avec cette situation
odiv.style.left = odiv.offsetleft + speed + 'px';
}, 30)
}
</cript>
</ head>
<body>
<entrée type = "bouton" id = "btn" value = "à 100" onclick = "startmove (100)" />
<input type = "Button" id = "btn" value = "à 300" onclick = "startmove (300)" />
<div id = "div1">
</div>
<div id = "div2">
</div>
<div id = "div3">
</div>
</docy>
En fait, si un tel code modifie la vitesse en un nombre impair comme 7 et atteint le point cible, il s'agit d'un entier, ce qui provoquera des bogues qui n'atteignent pas le point cible ou dépassent le point cible.
Alors pourquoi cela se produit-il?
En fait, lorsqu'il atteint le point cible, il ne peut pas atteindre avec précision le point cible. Si le point cible est de 100 et 7 promenades à chaque fois, pour le moment, il passe le point cible ou échoue.
N'atteignez jamais le point cible. En fait, c'est un peu comme aider la tampon précédente.
Alors, comment calculez-vous que vous avez atteint le point cible?
Par exemple: si vous prenez un taxi à un certain endroit, le conducteur s'arrêtera certainement à 10 mètres et à 20 mètres, et même si vous arrivez. Il est impossible de demander à la voiture de le coller à cet endroit et de s'arrêter.
Ainsi, en fait, le programme est le même. Tant que la distance entre l'objet et le point cible est proche d'une certaine mesure, nous n'avons pas besoin d'être plus proches, et nous pensons que nous l'avons atteint.
Regardons le code modifié:
La copie de code est la suivante:
<script type = "text / javascript">
var time = null;
fonction startmove (itarget) {
var odiv = document.getElementById ("div1");
ClearInterval (temps);
time = setInterval (function () {
Var Speed = 0;
if (odiv.offsetleft <itarget) {
vitesse = 7;
} autre {
vitesse = -7;
}
if (math.abs (itarget - odiv.offsetleft) <= 7) {
ClearInterval (temps);
odiv.style.left = itarget + 'px';
} autre {
odiv.style.left = odiv.offsetleft + speed + 'px';
}
}, 30)
}
</cript>
Permettez-moi d'expliquer: pourquoi avez-vous besoin d'utiliser des mathématiques pour obtenir la valeur absolue ici?
La raison est simple, car la vitesse peut être positive ou négative.
Maintenant, laissez la distance entre la cible et l'objet aussi petit que 7, alors il sera là. Pourquoi 7? Parce qu'il a moins de 7 exercices la prochaine fois. À l'heure actuelle, nous avons atteint le point cible.
Maintenant, le problème revient, et il ne s'est pas arrêté précisément au point cible par écrit de cette façon. Nous avons donc ajouté une phrase simple, laissée directement à gauche égale au point cible. odiv.style.left = itarget + 'px';
En fait, il y en avait moins de 7 la dernière fois, mais tout le monde sait que le programme fonctionne trop vite et que l'œil humain ne peut pas le voir. Sourire chaleureux
Il n'y aura aucun problème à ce moment. Clignoter
C'est la condition d'arrêt pour le mouvement uniforme. Puis un ami a demandé: Pourquoi l'exercice tampon est-il pas si gênant?
Parce que sa vitesse a changé et qu'elle devient de plus en plus petite, jusqu'à la fin, il atteint même 1, et il n'y aura certainement aucun problème de ce type lors de l'avenir étape par étape.