Inicio » Blog » Javascript

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

Contador decreciente con fechas

Suscríbete a nuestro canal en Youtube

Suscríbirse

En 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 5240 veces

Descarga el código fuente Javascript

Recurso descargado 182 veces

USD

Descargar Código Fuente

Compartir link del tutorial con tus amigos


Aprende más sobre Javascript

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023