2

verán, tengo una web que muestra en su pagina principal información relacionada a eventos (por ejemplo, conciertos, conferencias, etc) que yo oferto a los usuarios que visitan mi website. Estos datos los extraigo de la base de datos y muestro de forma perfecta y sin problemas pero sucede que uno de los datos que muestro es la fecha en que se realizara cada evento, lo hago de esta manera:

<?php 

function dateTo($str, $t1, $t2 = false) 
{
$t = $t1-($t2?$t2:time());
$p = array(
    '{s}'=>1,
    '{i}'=>60,
    '{h}'=>60*60,
    '{d}'=>60*60*24,
    '{w}'=>60*60*24*7,
    '{m}'=>60*60*24*30,
    '{y}'=>60*60*24*365
);
preg_match_all("/\{[sihdwmy]\}/", $str, $ma);
$found = Array();
foreach ($ma[0] as &$m) {
    $found[$m] = $p[$m];
}
arsort($found);
foreach ($found as $i => &$fo) {
    $str = str_replace($i, (int) ($t/$fo), $str);
    $t = $t % $fo;
}
return $str;
}
?>
<div class="card-evento">
   <div class="evento_info" style="width: 100%;">
      <p class="card-text evento_titulo"><?php echo $value->titulo_evento; ?></p>
      <p class="card-text fecha_evento"> Inicia en: 
      <?php echo dateTo("{d} días, {h}:{i}:{s}", strtotime($value->fecha_evento)); ?></p>
   </div>
 </div>

Con ese código, se muestra el titulo del evento y el tiempo que falta para que se inicie dicho evento, de esta forma:

Conferencia Sobre Impacto del Calentamiento Global en America.
Inicia en: 31 dias, 23:45:6

Eso esta bien pero me gustaría saber cómo hago para que se muestre ese tiempo disminuyendo en tiempo real, cómo un temporizador, que se muestre como van pasando los segundos, los minutos, las horas, los días hasta llegar a 0 días 0 horas 0 minutos 0 segundos, y que cuando eso pase, muestre un mensaje de "Día del Evento"?

Alguna idea que puedan darme para hacerlo con Javascript/Jquery ?

6
  • Puedes setear una cookie en el navegador que expire exactamente en ese tiempo, es decir, obtienes solo una vez la data del evento y una unica vez le estableces ese tiempo de vida, y luego puedes usar setInterval de parte de javascript para ejecutar una funcion que compruebe si la cookie aún existe, y la cookie deberia tener el valor del tiempo en el que quieres que expire, para hacerlo mas fácil deberias hacerlo en una unica unidad de tiempo, es decir, convertir toda tu fecha en horas, minutos o segundos solamente.
    – Layer
    el 7 abr. 2020 a las 18:41
  • Y pues en la funcion llamada por setInterval, hacer que se ejecute donde quieras mostrar esta información de la cookie, entonces lo unico que tendrias que hacer es establecerle un intervalo que consideres adecuado al setInterval, obtener la información de la cookie y restarle ya sea minutos, segundos u horas, la medida que hayas elegido, luego establecerle a la cookie el tiempo de vida restante, y pues cuando el tiempo de vida llegue a cero, es decir que la cookie ya no exista, entonces simplemente muestras el mensaje y dejas de ejecutar el setInterval.
    – Layer
    el 7 abr. 2020 a las 18:45
  • De hecho para que todo sea mas preciso, en el setInterval deberias usar el objeto Date de javascript y obtener la fecha actual ya sea en horas, minutos o segundos, la unidad que hayas elegido, y apartir de esa medida, hacer los cambios a la cookie.
    – Layer
    el 7 abr. 2020 a las 18:47
  • Es una forma que se me ocurre, se mas o menos que las cookies funcionan con un tiempo de vida definible por nosotros, pero lastimosamente, esto es lo unico en lo que te puedo ayudar, ya que la verdad nunca uso cookies, alguien mas que las haya usado podria usar esta información para resolver el problema o tu mismo si las haz usado, espero sea de ayuda, saludos.
    – Layer
    el 7 abr. 2020 a las 18:48
  • Parece una opción interesante. Voy a probarla también a ver qué tal.
    – Carmen B.
    el 8 abr. 2020 a las 17:14

1 respuesta 1

5

Opción fácil: Crea contenedores con una clase específica, enviando la fecha y hora del evento, con Javascript puedes obtener la fecha y crear los contadores necesarios:

window.onload = function() {
    // Obtener todos los contenedores por clase
    let spans = document.querySelectorAll('.contador');
    // Recorrer contenedores para crear contador
    spans.forEach(function(item) {
        // Obtener fecha y hora
        let cuando = new Date(item.innerText);
        // Crear intervalo cada segundo y enviando contenedor y fecha
        let itemInterval = setInterval(cuenta, 1000, item, cuando);
    });
}

function cuenta(item, cuando) {
    // Fecha y hora actual
    let ahora = new Date();
    // Obtener diferencia en segundos
    let tiempo = parseInt((cuando - ahora) / 1000);
    if(tiempo < 1) {
        // Ya pasó la fecha
        item.innerText = 'Finalizado';
    } else {
        // Calcular días
        let dias = Math.floor(tiempo / 86400);
        tiempo = tiempo - (dias * 86400);
        // Calcular horas
        let horas = Math.floor(tiempo / 3600);
        tiempo = tiempo - (horas * 3600);
        // Calcular minutos
        let minutos = Math.floor(tiempo / 60);
        // Calcular segundos
        let segundos = parseInt(tiempo - (minutos * 60));
        item.innerText = `Inicia en: ${dias} días ${zeroPad(horas, 2)}:${zeroPad(minutos, 2)}:${zeroPad(segundos, 2)}`;
    }
}

// Horas minutos y segundos siempre con 2 dígitos
const zeroPad = (num, places) => String(num).padStart(places, '0')
<span class="contador">2020-04-07 10:00:00</span><br>
<span class="contador">2020-04-08 08:00:00</span><br>
<span class="contador">2020-04-21 10:00:00</span><br>
<span class="contador">2020-04-30 18:00:00</span>

1
  • Muchisimas Gracias!!!! Funciona perfecto. Justo lo que necesitaba.
    – Carmen B.
    el 8 abr. 2020 a las 17:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.