[SOLUCIONADO] Fondo que cambie cada día a las 00:00

[seoista]

Buenos días forer@s.

Pregunta: ¿Cómo poner un fondo que cambie cada día a las 00:00 horas, en javascript?

Tengo este:

Código Javascript:

//<![CDATA[
var fondos = ['fondo1.jpg', 'fondo2.jpg', 'fondo3.jpg', 'fondo4.jpg', 'fondo5.jpg', 'fondo6.jpg', 'fondo7.jpg'];
var fondo_actual = 0;
var CambiarFondo = function(){
if (fondo_actual == fondos.length) {
fondo_actual = 0;
}
var precargar =fondo_actual++ % fondos.length;
var precargar2 = precargar+2 % fondos.length;
document.body.style.backgroundImage = 'url('+ fondos[precargar]+ ')';
document.getElementById('precarga').style.backgroundImage =  'url('+fondos[precargar2]+ ')';
}
window.setInterval(CambiarFondo, 60000);    //tiempo medido en milisegundos.
//]]>
 

Código HTML:

<div id="precarga"></div>
 

pero cambia cada X milisegundos y me gustaría que cambie cada día.

Gracias anticipadas.

Saludos

[maycolalvarez]

eso es porque el interval ejecuta la función cada X milesegundos a partir de ser declarado, si lo pones a X milisegundos que llegue a un día, nunca sucederá porque al recargar la página se pierde el conteo inicial, lo que debes haces es comprobar si la hora es 00:00 y para ello necesitas usar el objeto Date()

[seoista]

Iniciado por maycolalvarez

eso es porque el interval ejecuta la función cada X milesegundos a partir de ser declarado, si lo pones a X milisegundos que llegue a un día, nunca sucederá porque al recargar la página se pierde el conteo inicial, lo que debes haces es comprobar si la hora es 00:00 y para ello necesitas usar el objeto Date()

Gracias por contestar, @maycolalvarez.

Y ¿Cómo seria eso?. ¿Me puedes poner un ejemplo?.

Ahora lo tengo así para que cambie cada día, pero no cambia:

Código Javascript:

//<![CDATA[
 
var fondos = ['fondo1.jpg', 'fondo2.jpg', 'fondo3.jpg', 'fondo4.jpg', 'fondo5.jpg', 'fondo6.jpg', 'fondo7.jpg'];
var fondo_actual = 0;
var CambiarFondo = function(){
if (fondo_actual == fondos.length) {
fondo_actual = 0;
}
var precargar =fondo_actual++ % fondos.length;
var precargar2 = precargar+2 % fondos.length;
document.body.style.backgroundImage = 'url('+ fondos[precargar]+ ')';
document.getElementById('precarga').style.backgroundImage =  'url('+fondos[precargar2]+ ')';
}
window.setInterval(CambiarFondo, 86400000); //tiempo medidos en milisegundos.
                        //Un centisegundo equivale a 10 milisegundos
                        //Un decisegundo equivale a 100 milisegundos.
                        //Un segundo equivale a 1000 milisegundos.
                        //Un minuto equivale a 60000 milisegundos.
                        //Un día equivale a 86400000 milisegundos.
 
//]]>
 

Muchas gracias.

Saludos.

[hackjose]

Javascript se ejecuta en el cliente.

Por lo tanto javascript toma la hora del cliente, para ver los cambios el cliente tendria que estar las 24 horas en tu sitio.

Creo que te conviene una imagen por dia(lunes, martes, etc)

Para eso puedes el metodo
getday http://www.w3schools.com/jsref/jsref_getday.asp

espero te sirva saludos

Tal vez seria mejor que lo hicieras en el lado del servidor si es que son importantes las imagenes por que suele haber usuarios cuyas fechas estan mal

Saludos

[seoista]

Iniciado por hackjose

Creo que te conviene una imagen por dia(lunes, martes, etc)

Para eso puedes el metodo
getday http://www.w3schools.com/jsref/jsref_getday.asp

¡Es cierto, así lo haré!.

Gracias @hackjose, @maycolalvarez.

Saludos.

[seoista]

Iniciado por hackjose

Creo que te conviene una imagen por dia(lunes, martes, etc)

Para eso puedes el metodo
getday http://www.w3schools.com/jsref/jsref_getday.asp

Código:

var d=new Date();
var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";

var n = weekday[d.getDay()];

Lo siento, pero no me sirve para cambiar de fondo (background... ) cada día una página web. Si para cambiar una imagen o un texto.

Desearía que fuera parecido al JavaScript que puse más arriba, pero que funcione

Código:

var fondos = ['fondo1.jpg', 'fondo2.jpg', 'fondo3.jpg', 'fondo4.jpg', 'fondo5.jpg', 'fondo6.jpg', 'fondo7.jpg'];
var fondo_actual = 0;
var CambiarFondo = function(){
if (fondo_actual == fondos.length) {
fondo_actual = 0;
}
var precargar =fondo_actual++ % fondos.length;
var precargar2 = precargar+2 % fondos.length;
document.body.style.backgroundImage = 'url('+ fondos[precargar]+ ')';
document.getElementById('precarga').style.backgroundImage =  'url('+fondos[precargar2]+ ')';
}
window.setInterval(CambiarFondo, 86400000);	//tiempo medidos en milisegundos.
						//Un centisegundo equivale a 10 milisegundos
						//Un decisegundo equivale a 100 milisegundos.
						//Un segundo equivale a 1000 milisegundos.
						//Un minuto equivale a 60000 milisegundos.
						//(*)UN DÍA EQUIVALE A 86400000 MILISEGUNDOS.

(*) Cómo veis, 86400000 milisegundos equivale a un día, pero no responde, que al comenzar cada día, cambie a un fondo distinto.

Siento ser pesado.

Gracias.

[geofran80]

Yo lo que haría sería al inicio del LOGIN si el usuario se loguea o cuando entre en la web, mediante el evento ready del documento comprobar el día y la hora y así especificar el fondo.

Y para cuando el usuario lleva tiempo en la web usar un timer para que cada cierto tiempo compruebe la misma función.

Saludos cordiales.

Francisco J.

[hackjose]

Aqui un pequeño ejemplo
http://jsfiddle.net/XGUTT/

No cambia automaticamente, pero creo que no es necesario.

Si quieres que cambie automaticamente

Podrias usar setInterval o setTimeout

Yo me iria por setTimeout y el tiempo que le pondria seria 23:59 - hora actual del user + 1 segundo

Saludos

[seoista]

Iniciado por hackjose

Aqui un pequeño ejemplo
http://jsfiddle.net/XGUTT/

Creo que esto es lo que necesito. Lo voy a estudiar, a ver que saco.

Muchas gracias @hackjose .

Gracias también @geofran80.

Saludos .

[caricatos]

Hola Alberto:

Primero deberías obtener la hora actual con el objeto Date(), luego calcularía los milisegundos que faltan para acabar el día, y como ya sabes los milisegundos totales para cambiar de día, ese valor lo pondría luego con setInterval, como ya tenías:

Código HTML:

ahora = new Date();
hora = ahora.getHours();
mins = ahora.getMinutes();
segs = ahora.getSeconds();
faltanSegs = 60 - segs; // para cambiar el minutero
faltanMins = 60 - mins; // para cambiar la hora
faltanHors = 24 - hora; // para el día siguiente
Resta = 86400000 - (faltanHors * 60 * 60 * 1000); // falta restar minutos y segundos...
Resta -= (faltanMins * 60 * 1000); // falta restar los segundos
Resta -= (faltanSegs * 1000); // falta para cambiar de día

setTimeout (function() {CambiarFondo(); setInterval(CambiarFondo, 86400000);}, Resta)

No sé si me habré liado con los entrecomillados y los temporizadores...

Saludos

[seoista]

Hola Pepe, me alegro mucho saludarte. Bastante tiempo sin saber el uno del otro. Del 2 al 7 Mayo, he estado en Roma.

Referente al JavaScript que pones, ¿es correcto como lo estoy combinando?

Código Javascript:

var fondos = ["fondo1.jpg","fondo2.jpg","fondo3.jpg","fondo4.jpg","fondo5.jpg","fondo6.jpg","fondo7.jpg"];
 
ahora = new Date();
hora = ahora.getHours();
mins = ahora.getMinutes();
segs = ahora.getSeconds();
faltanSegs = 60 - segs; // para cambiar el minutero
faltanMins = 60 - mins; // para cambiar la hora
faltanHors = 24 - hora; // para el día siguiente
Resta = 86400000 - (faltanHors * 60 * 60 * 1000); // falta restar minutos y segundos...
Resta -= (faltanMins * 60 * 1000); // falta restar los segundos
Resta -= (faltanSegs * 1000); // falta para cambiar de día
 
setTimeout (function() {CambiarFondo(); setInterval(CambiarFondo, 86400000);}, Resta)
 
var fecha = new Date();
var dia = fecha.getDay();
 
document.body.style.backgroundImage = "url(" + fondos[dia] + ")";
 

Funcionar me funciona. He cambiado de día en el PC y me cambia el fondo de ese día. Creo que va bien. ¿Que te parece?.

Muchas gracias.

Un abrazo.

[seoista]

... Lo siento repetido con el de arriba.

Gracias

[caricatos]

Hola:

Iniciado por seoista

...
Creo que va bien. ¿Que te parece?.
...

Tendrás que contestarte tú mismo, probando a dejar la página abierta durante algunos días ¡Ja, ja!... el primer temporizador puedes probarlo modificando la hora del sistema como parece que ya has hecho, pero el resto no sabría decirte...

Tal vez haya alguna forma de probarlo usando valores más pequeños.

Saludos