Temporizador De Cuenta Regresiva De Javascript

exp | JavaScript | log | sin

Michael Zippo 04.11.2021

Los temporizadores de cuenta regresiva se utilizan en todo Internet por personas que desean realizar la cuenta regresiva hasta un evento importante.

Puede usar un temporizador de cuenta regresiva para realizar la cuenta regresiva hasta el lanzamiento de su nuevo sitio web. Un temporizador de cuenta regresiva podrìa marcar cuándo va a hacer un anuncio de producto. Hay tantas posibilidades para explorar.

En esta guìa, le mostraremos còmo crear un temporizador de cuenta regresiva en JavaScript utilizando tres tecnologìas: HTML, CSS y JavaScript. ¬°Comencemos!

Configuraciòn de nuestra página web

El primer paso es configurar nuestra página web básica. En esta guìa, no nos vamos a preocupar por utilizar bibliotecas externas. Lo haremos simple y usaremos HTML, CSS y JavaScript simples y antiguos.

Comencemos por crear nuestro archivo HTML:

Nuestro còdigo no devuelve nada especial en este momento, consulte a continuaciòn:

parece de esta manera porque no hemos rsquo ; No agregué ning√∫n estilo a nuestro còdigo todavìa o creé nuestro temporizador de JavaScript. Pasemos a la creaciòn del JavaScript que activará nuestro temporizador.

Creaciòn de nuestro temporizador

JavaScript tiene un objeto √∫til llamado Date que podemos usar para trabajar con fechas y horas. Vamos a utilizar este objeto con dos propòsitos: obtener una marca de tiempo del tiempo hasta el que queremos hacer la cuenta regresiva y obtener la fecha actual. & Nbsp;

En este tutorial, nosotros y rsquo ; vamos a escribir todos nuestros scripts en un "script" "/ script" etiqueta. No vamos a utilizar ning√∫n script externo.

Restar la fecha a la que estamos contando hacia atrás de nuestra fecha actual nos dará la diferencia entre estas dos fechas:

Este còdigo calculará còmo Quedan muchos dìas para el pròximo Dìa de Star Wars, que es el 4 de mayo de 2021.

Si bien ahora sabemos la diferencia entre estos dos dìas, hay algunos problemas. Primero, no lo sabemos. A√∫n no tenemos un temporizador con cuenta regresiva. En segundo lugar, nuestra fecha no se almacena en un formato que los humanos puedan leer fácilmente. Se almacena en milisegundos, lo cual no es exactamente conveniente para nosotros. Necesitamos convertir el tiempo en dìas, horas y minutos.

Para calcular el tiempo restante en un formato más legible, usaremos lo siguiente còdigo:

Podemos formatear los valores en una cadena usando este còdigo:

En este còdigo, usamos la interpolaciòn de cadenas para sustituir los valores que calculamos anteriormente. Esto nos dará una marca de tiempo como: 314 dìas 13 horas 52 minutos.

Ahora que hemos generado nuestra marca de tiempo, podemos colocarla en nuestra página web:

Podemos mover todos nuestros còdigo en una funciòn:

Cuando cargamos nuestra página, se devuelve lo siguiente:

Ahora tenemos nuestro temporizador. Hemos terminado por hoy, ¿verdad? No; no tan rapido. Si espera un minuto, verá que nuestro temporizador no cuenta realmente hacia atrás. Eso es porque necesitamos decirle a nuestro navegador que se actualice cada minuto. Lo hacemos usando este còdigo:

Este còdigo debe agregarse después de que se declare nuestra funciòn countdown (). Esto actualizará nuestra página cada 60.000 milisegundos. Esto equivale a cada 60 segundos.

< / a>