Contador autoreiniciable

[wil32]

Hola a tod@s... Me he estado quemando la cabeza y no puedo solucionar una cuestión.
Resulta que quiero hacer una cuenta regresiva de 20 minutos y que cada vez que llegue a 0, se vuelva a reiniciar en 20 y así esté todo el rato.

Ahora mi duda es... ¿Hay forma de que la cuenta regresiva aparezca en tiempo real en la pantalla? ¿O será que tengo que hacerlo con JavaScript?

Desde ya, gracias.

[petit89]

Si estableces la hora de inicio de cada 20 minutos referente a la hora del servidor y en base a esa reste cada vez que alguien entre a la web, pues estará sincronizado/en vivo para todos

Hora del servidor = TODOS tendran la misma cuenta

[wil32]

Iniciado por petit89

Si estableces la hora de inicio de cada 20 minutos referente a la hora del servidor y en base a esa reste cada vez que alguien entre a la web, pues estará sincronizado/en vivo para todos

Hora del servidor = TODOS tendran la misma cuenta

Sisisi, todo lo pensé de esa forma. Teniendo el horario del servidor como punto de inicio. Pero no he podido llegar al código.
Con javascript no me funcionó.

No soy profesional con php y mucho menos con javascript, pero tengo una muy gran idea sobre los dos lenguajes.

Gracias.

[Triby]

Con PHP obtienes el tiempo del contador y lo muestras con Javascript.

Código PHP:

<?php
$time = 20 * 60; // 20 minutos y podrías (deberías) obtenerlo de la base de datos.
 
// Hora de llevarlo a javascript
?>
<script>
time = <?php echo $time; ?>;
// Tal vez debas usar setTimeout para llamar a una función y actualizar el contador en la página
</script>
 

Por supuesto, también debes considerar que la función en Javascript se ejecute hasta que se cargue la página, para evitar errores.

[wil32]

Iniciado por Triby

Con PHP obtienes el tiempo del contador y lo muestras con Javascript.

Código PHP:

<?php
$time = 20 * 60; // 20 minutos y podrías (deberías) obtenerlo de la base de datos.
 
// Hora de llevarlo a javascript
?>
<script>
time = <?php echo $time; ?>;
// Tal vez debas usar setTimeout para llamar a una función y actualizar el contador en la página
</script>
 

Por supuesto, también debes considerar que la función en Javascript se ejecute hasta que se cargue la página, para evitar errores.

Gracias. Y otra cosa... ¿Sí o sí tiene que ser con JS? ¿No puede ser solamente con php?

[Triby]

Si quieres que el contador se actualice cada segundo, entonces sí requieres javascript, de lo contrario, solo se verá el tiempo restante, estático, y se actualizará solo si recargas la página.

[alvaro_trewhela]

Como dicen arriba, toca usar js.

Te dejo lo que haría, pero antes que nada el elemento html en el cual se tratará la cuenta atras debe ser de esta forma:

<div id="someID">mm:ss:cc</div>

Código Javascript:

function countDown(timer, restart, cooldown, intv, callback){
var time = timer.innerHTML.split(":");
 
var c = parseInt(time[2]);
var s = parseInt(time[1]);
var m = parseInt(time[0]);
 
var stop = false;
 
    if(--c < 0){
    c = 99;
        if(--s < 0){
        s = 59;
            if(--m < 0){
            stop = true;
            m = restart;
            s = 0;
            c = 0;
            // callback(); <--- if you want to use the callback remove the bars !!      
            }
        }
    }
 
    if(c < 10){ c = "0"+c; }
    if(s < 10){ s = "0"+s; }
    if(m < 10){ m = "0"+m; }
timer.innerHTML = m+":"+s+":"+c;
 
    if(stop){
    clearInterval(intv);
    setTimeout(function(){
        intv = setInterval(function(){ countDown(timer, restart, cooldown, intv, callback); },10);
        },cooldown);
    }
}
 

Parametros:
timer = elemento en el cual se trabajara
restart = minutos del reinicio (20 en este caso)
cooldown = tiempo para reiniciar la cuenta atras, en ms, si quieres esperar 5 segundos, entonces usas 5000
intv = la variable que contiene el intervalo de esta funcion
callback = funcion a ejecutar al terminar la cuenta atras

Entonces podrias hacer algo así

Código Javascript:

var  cuentaAtras = setInterval( function(){ countDown(document.getElementById('timer'), 20, 3000, cuentaAtras, algunaFuncion) },10);
 

Te recuerdo que ese ultimo 10 es necesario, ya que js trabaja con milisegundos (10^-3), y estamos trabajando con centesimas (10^-2) de segundo, por lo tanto tenemos que hacer la conversion:

10^-3/10^-2 = 10

Espero no haber cometido algun error

Saludos