24 octubre, 2018
Contador decreciente con fechas
En ocasiones necesitamos un contador descendente con días, horas, minutos y segundos que faltan para llegar a una fecha. Como hacer una cuenta regresiva
Suscríbete a nuestro canal en Youtube
SuscríbirseEn ocasiones necesitamos un contador decreciente con los dias, horas, minutos y segudos que faltan para llegar a una fecha. Generalmente para el inicio de un evento.
Entonces, vamos a programar una cuenta regresiva en Javascript usando para el diseño HTML y CSS, intentaremos calcular los siguientes datos:
- Dias restantes
- Horas restantes
- Minutos restantes
- y Segundos restantes
Para ello definimos dos funciones javascript una que realiza el calculo y la otra que realiza el temporizador a 1 segundo para actualizar la vista.
Ideal para nuestro proyectos web.
Cómo funciona el contador regresivo en JS
Vamos a trabajar con fechas es decir con objetos de tipo Date ya que estas fechas permiten trabajar con una precisión de milisegundos.
En cuanto el usuario inicia el temporizador, se calcula la fecha objetivo que puede ser por ejemplo la navidad, dia de la madre, la fecha de lanzamiento de un sitio web, etc. en la que se va a detener el temporizador, sumando a la fecha actual los dias, horas, minutos y segundos.
Después iniciamos el sertInterval va a estar verificando si el tiempo ya se ha terminado cada 1000 milisegundos. Para comprobar si el tiempo ha acabado vamos a calcular la diferencia de la fecha objetivo (en la que acaba el temporizador) con la fecha actual y en caso de que el tiempo sea menor o igual a cero indicaremos que el tiempo se ha terminado.
Código fuente del contador
He aqui la implementación del código. en HTML, CSS y Javascript
CÓDIGO HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CONTADOR PARA FECHAS</title>
</head>
<body>
<div id="countdown"></div>
<script>
....
</script>
<style>
...
</style>
</body>
</html>
CÓDIGO CSS
body{font-family: Arial, Helvetica, sans-serif;}
#countdown{
width: 300px;
margin: 0 auto;
border:1px solid red;
background: rebeccapurple;
padding: 20px 0px;
display: flex; justify-content: space-evenly;
border-radius: 10px;
}
.box{
background: red;
border: 2px solid rgb(255, 234, 0);
width: 60px;
font-size: 40px;
text-align: center;
border-radius: 10px;
color: white;
}
.box .text{
font-size: 12px;
background: yellow;
color:black;
padding: 5px 0;
border-radius: 0px 0px 8px 8px;}
CÓDIGO JAVASCRIPT
var end = new Date('12/25/2022 00:00 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = '<div class="box">'+days + '<div class="text">DIAS</div></div><div class="box">' + hours + '<div class="text">HORA</div></div><div class="box">' + minutes + '<div class="text">MIN</div></div><div class="box">' + seconds+'<div class="text">SEG</div></div>';
}
timer = setInterval(showRemaining, 1000);
Leido 5627 veces
