Primero veamos el código anterior de movimiento uniforme. Qué tipo de error ocurrirá después de modificar la velocidad. Aquí hay dos puntos de referencia para las pruebas
La copia del código es la siguiente:
<style type = "text/css">
#Div1 {
Ancho: 100px;
Altura: 100px;
Posición: Absoluto;
Antecedentes: rojo;
Arriba: 50px;
Izquierda: 600px;
}
#div2 {
Ancho: 1px;
Altura: 300px;
Posición: Absoluto;
Izquierda: 300px;
arriba: 0;
Fondo: negro;
}
#div3 {
Ancho: 1px;
Altura: 300px;
Posición: Absoluto;
Izquierda: 100px;
arriba: 0;
Fondo: negro;
}
</style>
<script type = "text/javaScript">
VAR TIME = NULL;
función startMove (ITARGET) {
var odiv = document.getElementById ("div1");
ClearInterval (tiempo);
Time = setInterval (function () {
Vel Speed = 0;
if (odiv.offsetleft <Itarget) {
velocidad = 7;
} demás {
velocidad = -7;
}
// En realidad, hay un problema con esta situación
odiv.style.left = odiv.offsetleft + velocidad + 'px';
}, 30)
}
</script>
</ablo>
<Body>
<input type = "botón" id = "btn" valor = "a 100" onClick = "startmove (100)" />
<input type = "botón" id = "btn" value = "a 300" onClick = "startmove (300)" />
<div id = "div1">
</div>
<div id = "div2">
</div>
<div id = "div3">
</div>
</body>
De hecho, si dicho código cambia la velocidad a un número impar como 7, y alcanza el punto de destino, es un entero, lo que causará errores que no alcanzan el punto de destino o exceden el punto de destino.
Entonces, ¿por qué sucede esto?
De hecho, cuando llega al punto objetivo, no puede alcanzar con precisión el punto objetivo. Si el punto objetivo es de 100 y 7 caminatas cada vez, en este momento, pasa el punto objetivo o falla.
Nunca llegue al punto objetivo. De hecho, es un poco como ayudar al amortiguador anterior.
Entonces, ¿cómo se calcula que ha alcanzado el punto objetivo?
Por ejemplo: si toma un taxi a un lugar determinado, el conductor definitivamente se detendrá allí a 10 metros y 20 metros de distancia, e incluso si llega. Es imposible pedirle al auto que lo pegue en ese lugar y se detenga.
Entonces, de hecho, el programa es el mismo. Mientras la distancia entre el objeto y el punto objetivo esté cerca de cierta medida, no necesitamos estar más cerca, y creemos que lo hemos alcanzado.
Veamos el código modificado:
La copia del código es la siguiente:
<script type = "text/javaScript">
VAR TIME = NULL;
función startMove (ITARGET) {
var odiv = document.getElementById ("div1");
ClearInterval (tiempo);
Time = setInterval (function () {
Vel Speed = 0;
if (odiv.offsetleft <Itarget) {
velocidad = 7;
} demás {
velocidad = -7;
}
if (math.abs (ITARGET - ODIV.OFFSETLEFT) <= 7) {
ClearInterval (tiempo);
odiv.style.left = ITARGET+'PX';
} demás {
odiv.style.left = odiv.offsetleft + velocidad + 'px';
}
}, 30)
}
</script>
Déjame explicar: ¿por qué necesitas usar matemáticas. Abs para obtener el valor absoluto aquí?
La razón es simple, porque la velocidad puede ser positiva o negativa.
Ahora deje que la distancia entre el objetivo y el objeto sea tan pequeño como 7, entonces estará allí. ¿Por qué 7? Porque tiene menos de 7 ejercicios la próxima vez. En este momento, hemos llegado al punto objetivo.
Ahora el problema vuelve a venir, y no se detuvo con precisión en el punto objetivo en la escritura de esta manera. Así que agregamos una oración simple, directamente, la izquierda es igual al punto de destino. odiv.style.left = ITARGET+'PX';
De hecho, hubo menos de 7 de ellos la última vez, pero todos saben que el programa funciona demasiado rápido y que el ojo humano no puede verlo. Sonrisa cálida
No habrá ningún problema en este momento. Parpadear
Esta es la condición de detención para el movimiento uniforme. Entonces un amigo preguntó, ¿por qué el ejercicio de buffing no es tan problemático?
Debido a que su velocidad ha cambiado y se está volviendo cada vez más pequeña, hasta el final incluso alcanza 1, y definitivamente no habrá tal problema al avanzar paso a paso.