Foros del Web » Programando para Internet » PHP »

Contador autoreiniciable

Estas en el tema de Contador autoreiniciable en el foro de PHP en Foros del Web. Hola a [email protected] Me he estado quemando la cabeza y no puedo solucionar una cuestión. Resulta que quiero hacer una cuenta regresiva de 20 minutos ...
  #1 (permalink)  
Antiguo 03/10/2017, 22:25
 
Fecha de Ingreso: abril-2016
Mensajes: 30
Antigüedad: 1 año, 7 meses
Puntos: 2
Contador autoreiniciable

Hola a [email protected] 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.
  #2 (permalink)  
Antiguo 03/10/2017, 22:31
Avatar de petit89  
Fecha de Ingreso: marzo-2011
Mensajes: 889
Antigüedad: 6 años, 8 meses
Puntos: 130
Respuesta: Contador autoreiniciable

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
__________________
█ WebHosting / Reseller a bajo costo | Uptime Garantizado | Soporte en Español e Ingles
¿Te sirvió la respuesta? Deja un +1 (Triangulo negro al lado derecho)
  #3 (permalink)  
Antiguo 03/10/2017, 22:47
 
Fecha de Ingreso: abril-2016
Mensajes: 30
Antigüedad: 1 año, 7 meses
Puntos: 2
Respuesta: Contador autoreiniciable

Cita:
Iniciado por petit89 Ver Mensaje
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.
  #4 (permalink)  
Antiguo 03/10/2017, 23:41
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.740
Antigüedad: 9 años, 3 meses
Puntos: 2112
Respuesta: Contador autoreiniciable

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

Código PHP:
Ver original
  1. <?php
  2. $time = 20 * 60; // 20 minutos y podrías (deberías) obtenerlo de la base de datos.
  3.  
  4. // Hora de llevarlo a javascript
  5. ?>
  6. <script>
  7. time = <?php echo $time; ?>;
  8. // Tal vez debas usar setTimeout para llamar a una función y actualizar el contador en la página
  9. </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.
__________________
- León, Guanajuato
- GV-Foto
  #5 (permalink)  
Antiguo 04/10/2017, 00:01
 
Fecha de Ingreso: abril-2016
Mensajes: 30
Antigüedad: 1 año, 7 meses
Puntos: 2
Respuesta: Contador autoreiniciable

Cita:
Iniciado por Triby Ver Mensaje
Con PHP obtienes el tiempo del contador y lo muestras con Javascript.

Código PHP:
Ver original
  1. <?php
  2. $time = 20 * 60; // 20 minutos y podrías (deberías) obtenerlo de la base de datos.
  3.  
  4. // Hora de llevarlo a javascript
  5. ?>
  6. <script>
  7. time = <?php echo $time; ?>;
  8. // Tal vez debas usar setTimeout para llamar a una función y actualizar el contador en la página
  9. </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?
  #6 (permalink)  
Antiguo 04/10/2017, 02:01
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.740
Antigüedad: 9 años, 3 meses
Puntos: 2112
Respuesta: Contador autoreiniciable

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.
__________________
- León, Guanajuato
- GV-Foto
  #7 (permalink)  
Antiguo 04/10/2017, 13:17
Avatar de alvaro_trewhela  
Fecha de Ingreso: octubre-2012
Ubicación: localhost
Mensajes: 783
Antigüedad: 5 años, 1 mes
Puntos: 92
Respuesta: Contador autoreiniciable

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:
Ver original
  1. function countDown(timer, restart, cooldown, intv, callback){
  2. var time = timer.innerHTML.split(":");
  3.  
  4. var c = parseInt(time[2]);
  5. var s = parseInt(time[1]);
  6. var m = parseInt(time[0]);
  7.  
  8. var stop = false;
  9.  
  10.     if(--c < 0){
  11.     c = 99;
  12.         if(--s < 0){
  13.         s = 59;
  14.             if(--m < 0){
  15.             stop = true;
  16.             m = restart;
  17.             s = 0;
  18.             c = 0;
  19.             // callback(); <--- if you want to use the callback remove the bars !!     
  20.             }
  21.         }
  22.     }
  23.  
  24.     if(c < 10){ c = "0"+c; }
  25.     if(s < 10){ s = "0"+s; }
  26.     if(m < 10){ m = "0"+m; }
  27. timer.innerHTML = m+":"+s+":"+c;
  28.  
  29.     if(stop){
  30.     clearInterval(intv);
  31.     setTimeout(function(){
  32.         intv = setInterval(function(){ countDown(timer, restart, cooldown, intv, callback); },10);
  33.         },cooldown);
  34.     }
  35. }

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:
Ver original
  1. 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

Última edición por alvaro_trewhela; 04/10/2017 a las 13:58



La zona horaria es GMT -6. Ahora son las 04:01.