-
Tengo esta página web con una imagen de "Oh noes",
-
que está anunciando que el mundo se va a terminar pronto,
-
específicamente en 500 segundos.
-
Quiero hacer que esta página web sea más útil,
-
cambiando este número a una cuenta regresiva en vivo,
-
de manera que los visitantes puedan ver exactamente cuánto tiempo les queda.
-
Ahora, cuando animamos una parte de una página web,
-
la estrategia es encontrar en ella algún elemento,
-
luego cambiar algo de ese elemento,
-
y hacer eso un cierto número de veces por segundo.
-
Así que para el primer paso, voy a encontrar el "countdown" por "Id". (La cuenta regresiva).
-
Sencillo.
-
'var countdown = document.getElementById("countdown");'
-
En el segundo paso, voy a escribir una función que haga un conteo regresivo.
-
'var countItDown = funtion() {'...
-
Y lo que vamos a hacer...
-
Quiero definir el "textContent", y lo quiero definir como
-
el número previo menos uno.
-
Y el "textContent" en realidad es una cadena de caracteres,
-
así que lo tenemos que cambiar a un número.
-
Podemos hacer eso usando "parsefloat()".
-
Y luego le podemos restar uno.
-
Ok, finalmente, queremos llamar esta función en un intervalo,
-
lo que significa: un cierto número de veces por segundo.
-
Y podemos hacer eso usando "window.setInterval()".
-
Y esta función tiene dos argumentos:
-
la función "callback" y el número de milisegundos que tiene que esperar
-
antes de que la función se llame otra vez.
-
Podemos especificar la función de tipo "callback"
-
de la misma manera que lo hicimos con los detectores de eventos: por nombre.
-
Y luego... en realidad ahora está corriendo muy rápido,
-
porque no le hemos especificado el segundo argumento,
-
así que para eso, queremos que sea un cierto número de milisegundos,
-
y queremos que se llame una vez por segundo, así que vamos a escribir: 1000,
-
porque hay 1000 milisegundos en un segundo.
-
Aquí vamos, ahora está contando una vez por segundo.
-
¡Así que será mejor que aprendas lo más que puedas en los próximos 490 segundos!
-
Hay una función más de "window" que usamos algunas veces en lugar de "setInterval",
-
y es "setTimeout".
-
Y sólo la voy cambiar aquí, a ver si puedes ver la diferencia.
-
Tenemos que esperar un segundo.
-
Ok, ahora probablemente puedas ver que cuando usamos "setTimeout",
-
el navegador sólo llama la función una vez, y no repetidamente.
-
Esto no es tan útil cuando estamos haciendo animaciones.
-
Pero puede ser muy útil en otros casos,
-
como cuando mostramos una bandera de advertencia, y luego la queremos
-
ocultar después de 10 segundos.
-
Así que déjenme regresar esto a "setInterval".
-
Ahora, cuando estamos probando animaciones como ésta,
-
en realidad, deberíamos ver cómo funciona en todos los puntos de la animación,
-
como cuando llega a cero.
-
Bueno, va a tomar mucho tiempo para llegar a cero,
-
y vas a estar muy aburrido, así que
-
vamos a cambiar el dato inicial a 5,
-
y ver qué pasa.
-
Cuatro, tres, dos, uno, cero...
-
uno negativo, dos negativo.
-
Ok, ahora se ve un poco raro.
-
Cuando el mundo se acaba, simplemente debería hacer ¡Kaboom! y dejar de contar.
-
Así que lo que queremos hacer en realidad, es detener esta animación,
-
una vez que llegue a cero.
-
Y podemos hacer eso usando una condición "if" dentro de la función.
-
Así que déjenme empezar por guardar el segundo actual en una variable,
-
porque lo vamos a usar algunas veces.
-
Así que voy a copiar esto y ponerlo aquí,
-
y reemplazar esto con "currentTime".
-
Ahora lo que puedo hacer es poner una condición "if"
-
que nos asegure que sólo actualizará el texto si "currentTime" es mayor que cero.
-
Que es en realidad, cuando queremos que reste uno.
-
Entonces necesito mover esto aquí dentro.
-
Esto funciona, pero en realidad hay algo mal en este enfoque.
-
El navegador sigue llamando a la función "countItDown" una vez por segundo
-
en tanto que esta página web está abierta.
-
No deberías hacer que los navegadores llamaran funciones sin razón,
-
ellos tienen muchas otras cosas importantes que hacer.
-
Lo que en realidad queremos hacer es decirle al navegador que
-
una vez que llegue a cero, no necesita llamar a esta función ni una vez más.
-
Podemos hacer eso usando un nuevo método: "window.clearInterval()".
-
Podemos pegar eso en este "else", aquí, "window.clearInterval()".
-
Ahora, necesitamos pasarle un argumento, para que sepa cuál intervalo debe limpiar.
-
Porque en realidad podríamos tener múltiples intervalos en un página.
-
La manera de saber cuál intervalo limpiar
-
es guardar el resultado de "setInterval" en una variable.
-
Así que ahora que tengo el resultado en la variable "timer", puedo copiar y pegaralo allí,
-
y ahora ya sabe qué limpiar, cuando llegue a cero,
-
debe dejar de actualizar, y debe dejar de llamar a la función.
-
Para cada animación que hagan, deben pensar cuidadosamente
-
cuál debería ser la condición para detenerse.
-
Y sí, probablemente tengan algunas animaciones que deberían correr y correr, amigos,
-
pero más vale que sean animaciones realmente buenas.
-
Porque el navegador estará trabajando cada vez que llamen esa función de tipo "callback".
-
Ahora den vuelta a la página y logren que el mundo haga ¡Kaboom!
