Cuenta atrás (WordPress)

kainlucifer #1 Jun '13

Buenas! Estoy modificando ciertas cosas en una página que tengo realizada sobre WordPress, el caso es que quiero algo específico y me llevo quebrando la cabeza bastante, y no sé cual es la manera más eficiente de realizarlo, a ver si me podéis ayudar.

Debería mostrar únicamente Horas - Minutos - Segundos, ya que no llegará al día completo.

Os pongo en situación :

Yo realizo unos servicios entre las X y X horas del día (pongamos 16:00 y 21:00) de la tarde.

Necesito algo tal que:

Si son menos de las 16:00 de la tarde o más de las 21:00 de la tarde

En este momento no estamos trabajando, por favor vuelva en "xx" (Tiempo hasta las 4 de la tarde de ese día, o del siguiente).

Si está entre las 16:00 y 21:00 de la tarde :

En este momento estamos trabajando, aún estaremos (XX) horas más.

Esto sería posible? Cómo?

Mi idea es ponerlo sobre una pagina montada en WP, mis conocimientos tanto Jscript, como en PHP son limitados, pero bueno, supongo que si me guiais podré sacarlo adelante.

Gracias!

elkaoD #2 Jun '13

#1 no sabes dónde te has metido. El infierno de las timezones.

Mete en algún lado de tu HTML/tempalte un <span id="remaining"></span> (aquí se escribirá el mensajito).
En JavaScript, cuando se haya cargado la página (usando window.onload o equivalente)
2.1. Guarda en alguna variable el span usando document.getElementById('remaining');
2.2. Guarda el timezone offset actual (cuanto se lleva españa con UTC, en invierno +1, en verano +2)
2.3. Guarda la fecha/hora de hoy al comienzo y al final del periodo (usando Date()).
2.4. Crea una función que (ajustando con UTC):
2.4.1. Si ahora > comienzo, mostrar cuánto falta (es decir, final - ahora).
2.4.2. Si ahora > final, calcular el comienzo al día siguiente y mostrar cuánto falta (es decir, comienzo_siguiente - ahora).
2.3. Lanza una función repetida cada 1000msecs usando setInterval(tu_funcion, 1000);

Y ojo, esto tiene un fallo: si dejas la web abierta más de 24 horas pues se le va la cabeza. 2.2 y 2.3 debes realizarlos cada vez que cambie el día.

Lo de ajustar con UTC es necesario por si entran a la web desde fuera de españa, básicamente.

2 respuestas

kainlucifer #3 Jun '13

Gracias #2

Voy a hacer pruebas a ver como va la cosa.

El caso es que he estado mirándolo de hacer con Jquery y es un follón de narices xDDD

Todos los ejemplos / lo que sea que encuentro por ahí o no me valen o "creo" que no me valen... la verdad.

kainlucifer #4 Jun '13

Dobleposteo para que se suba el post.

Estoy mirándolo de hacer con Jquery, hasta ahora lo que he conseguido es esto :

<script type="text/javascript">
	//Variables
	var fecha;
	var segundos;
	var minutos;
	var horas;
	var x;
	
var horaComienzo = 19;

var horaFinal = 3;

var diferencia1;
//Funcion principal
x = $(document);
x.ready(timer_prueba);	
//funcion del timer_prueba
function timer_prueba() {
	x= $("#timer");
	fecha = new Date();
	segundos = fecha.getSeconds();
	minutos = fecha.getMinutes();
	horas = fecha.getHours();
	

	if (horas > horaComienzo | horas < horaFinal) {
	diferenciaHoras = horas - horaComienzo +1;
	diferenciaMinutos = 60 - minutos -1;
	diferenciaSegundos = 60 - segundos;

	x.html("En este momento todos los servicios estan activados");

}

	else if(horas < horaComienzo && horas > horaFinal) {
	diferenciaHoras = horas - horaComienzo +1;
	diferenciaMinutos = 60 - minutos -1;
	diferenciaSegundos = 60 - segundos;
	
	x.html(diferenciaHoras + ":" + diferenciaMinutos + ":" + diferenciaSegundos);
	
	}
	
}
  
//definimos el intervalo
setInterval(timer_prueba,1000);



  
  </script>

Problemas:

1- Me marca las horas que quedan en negativo, cómo puedo cambiar eso?

2- Evidentemente, y como bien dices #2 ahora no estoy controlando la zona horaria por la que entran, y la hora que recojo en variables, es la que obtengo del cliente, no es así?

Este punto es importante porque la web recibe visitas desde todas partes del mundo, y mayoritariamente de US

Dado el caso 2, como podría cambiar el código para que funcionara correctamente? De verdad, que no pido que me hagáis el trabajo ni nada xD Soy muy newbie en esto, llevo mucho sin tocar código, y estoy ultraperdido.

Gracias de nuevo

1 respuesta

elkaoD #5 Jun '13

#4 el primer if no debería ser | sino && y en el segundo es diferenciaHoras = horaComienzo - horas; (evidentemente si horas < horaComienzo, te va a dar negativo horas - horaComienzo, por lo que va al revés).

1 respuesta

kainlucifer #6 Jun '13

#5 No entra por el primer if con &&

Creo suponer, que porque estoy haciendo algo terriblemente mal.

No obstante, creo que voy a optar por la opción (si es posible, que imagino que si) de recoger la hora del servidor en vez de la del cliente, y calcular desde ahí, que sea la misma siempre.

Ya que, como voy a decir que los servicios empezarán en "7" horas por ejemplo, da igual en que horario estés, que en 7 horas empezarán.

Edit: Arreglado, las horas ya las muestra bien, y no en negativo.

PD: Si no estoy mal encaminado, tendría que tirar de PHP para coger la hora del servidor, no? Ya que JS solo funciona con el lado cliente...

Edit 2: Quería cambiar algo el código, que cuando esté entre las 19:00 y las 03:00, en vez de mostrar ese mensaje, muestre también las horas restantes, pues bien :

		if (horas > horaComienzo | horas < horaFinal) {
		diferenciaHoras = horaFinal - horas -1;
		diferenciaMinutos = 60 - minutos -1;
		diferenciaSegundos = 60 - segundos;
	
	x.html("Todos nuestros servicios están activados hasta:" + diferenciaHoras + ":" + diferenciaMinutos + ":" + diferenciaSegundos);

El problema, es que no me calcula bien, por ejemplo, si son la 1, si, muestra que faltan 2 horas.

Ahora, si son las 23:00, dirá que faltan 20 horas.

Qué puedo hacer?

Cuenta atrás (WordPress)

Usuarios habituales

Tags