Pregunta: ¿QUÉ HACE EL MÉTODO "myMove()"? ¿Puedes explicarlo?
#miContenedor { ancho: 400px; altura: 400px; posición: relativa; fondo: amarillo; } #miAnimación { ancho: 50px; altura: 50px; posición: absoluta; color de fondo: rojo; }Haz click en mi
function myMove() { var elem = document.getElementById("myAnimation"); pos var = 0; id var = setInterval(marco, 10); marco de función () { if (pos == 350) { clearInterval (id); } más { pos++; elem.estilo.superior = pos + 'px'; elem.estilo.izquierda = pos + 'px'; } } }Nota rápida: en esta respuesta, asumiré que la pregunta final dice:
What does the `myMove()` method do?Primero echemos un vistazo a las variables:
var elem = document.getElementById("myAnimation"); var pos = 0; var id = setInterval(frame, 10); La variable elem hace referencia al cuadro rojo que se mueve por el lienzo (un elemento div). Establecemos la variable pos tick en 0, que controlará cuántas veces moveremos el cuadro por la pantalla. Finalmente, id se refiere a una función setInterval que llama a la función de frame definida cada 10 milisegundos.
Ahora veamos el frame de la función:
function frame() { if (pos == 350) { clearInterval(id); } else { pos++; elem.style.top = pos + 'px'; elem.style.left = pos + 'px'; } } Primero, ejecuta una verificación rápida para ver si los ticks están hechos, o en otras palabras, verifica si la posición es 350. Luego, si es así, detiene el ciclo. Si no es así, hace que el cuadro se mueva hacia abajo 1 píxel configurando la posición desde arriba a la variable pos .
Todo este código está contenido en la función myMove() .