fondo web con la posición del sol según la hora

[fredyossa]

tengo un proyecto, y es hacer una web normalita de musica a la cual van a estar conectados mucho tiempo, y lo que quiero es que el fondo de dicha web cambie con javascript puede ser cada media hora pero que no se actualice la pagina (solo el fondo)ya tengo algo hecho pero en php, pues muestra el fondo según la hora pero como saben ahí se queda hasta actualizar si alguien me puede echar una manito con algún script se lo agradecería (yo de javascript, poco o nada)

[_cronos2]

Deberías tener 2 * 24 = 48 imágenes, si las tienes sólo hace falta algó así:

Código Javascript:

function cambiarFondo(){
 var f = new Date();
 var num = f.getHours() * 2 + f.getMinutes() >= 30 + 1;
 document.body.style.backgroundImage = 'imagenes/' + num + 'jpg';
// las rutas de las imágenes deben ser del tipo imagen/n.jpg donde n € [1, 48]
}
setInterval(function(){ cambiarFondo() }, 1000 * 60 * 30);
 

Saludos (:

[fredyossa]

_cronos2 muchas gracias por responder tan rápido pero, no veo que estoy haciendo mal por que no logro ponerlo en marcha como lo dije antes no soy experto en javascript pero no soy de los que piden ayuda por pedirla así que le agradecería un poco mas, inserté el código entre las etiquetas head (lógico que con las etiquetas script) y también lo inserté en el body; las imágenes las tengo en la carpeta imagenes y numeradas de 1 a 48 y no me funciona de ninguna de las dos maneras.

[_cronos2]

Prueba cambiando esta línea:

Código Javascript:

var num = f.getHours() * 2 + Number(f.getMinutes() >= 30) + 1;
 

Saludos (:

[fredyossa]

Después de ensayar y ensayar me dio este código basado en el de _cronos2 donde lo que hice fue cambiar algunas cositas, como hacer que cambie cada hora, pero con un refresco de 3 segundos ya que si lo dejo que refresque cada 30 minutos habría que esperar ese lapso de tiempo para ver el primer fondo. No sé si estará mal el código pero me funciona. gracias por las luces _cronos2.

<script language="JavaScript">
function cambiarFondo(){
var f = new Date();
var num = f.getHours();
document.body.style.backgroundImage = 'url(' + 'imagenes/' + num + '.jpg' + ')';
}
window.onload = function(){
setInterval('cambiarFondo()', 3000);
};
</script>

[AlejandroMtzRmz]

Que buena idea, cuando termines el proyecto nos pasas la pagina para ver como quedo

[zerokilled]

buenas...

[...] lo que hice fue cambiar algunas cositas, como hacer que cambie cada hora, pero con un refresco de 3 segundos ya que si lo dejo que refresque cada 30 minutos habría que esperar ese lapso de tiempo para ver el primer fondo.

considero que es una perdida de recurso tener que invocar la funcion cada tres segundos. en ese caso, lo unico que tenias que hacer era invocar directamente la funcion una sola vez. o sea, dentro de onload invocas la funcion cambiarFondo. asi no tienes que esperar el lapso de treinta minutos la primera vez.

[fredyossa]

Iniciado por zerokilled

buenas...



considero que es una perdida de recurso tener que invocar la funcion cada tres segundos. en ese caso, lo unico que tenias que hacer era invocar directamente la funcion una sola vez. o sea, dentro de onload invocas la funcion cambiarFondo. asi no tienes que esperar el lapso de treinta minutos la primera vez.

gracias zerokilled por responder y desearía que me dijeras como se hace eso, por ahora es lo que me funcionó y estoy abierto a correcciones ya que como dije antes: de javascript "ni pio" solo trato de hacer algo con lo que encuentro; entiendo lo que usted dice del refresco cada tres segundos ya que es un desgaste enorme de recursos, pero la verdad no he encontrado algo que se ajuste a lo que quiero.

[fredyossa]

Iniciado por AlejandroMtzRmz

Que buena idea, cuando termines el proyecto nos pasas la pagina para ver como quedo

Me gusta compartir, cuente con eso!!!

[zerokilled]

nada complicado... simplemente, antes de setInterval escribes la invocacion cambiarFondo().

[fredyossa]

Iniciado por zerokilled

nada complicado... simplemente, antes de setInterval escribes la invocacion cambiarFondo().

jajaja, El que sabe sabe!, pero mi pregunta es: si entro a la página a las 8:59, vería el fondo de las 8 inmediatamente pero, habría que esperar media hora para ver el fondo de las 9:00, hay alguna forma de detectar el cambio de hora y hacer que el cambio de fondo sea inmediato o por lo menos sin tanto retraso?; o seria reducir, digamos a 5 minutos el refresco del fondo?

<html>
<head>
<title>Documento</title>
<script language="JavaScript">
function cambiarFondo(){
var f = new Date();
var num = f.getHours();
document.body.style.backgroundImage = 'url(' + 'imagenes/' + num + '.jpg' + ')';
}
window.onload = function(){
cambiarFondo()
setInterval('cambiarFondo()', 30000);
};
</script>
</head>
<body>

</body>
</html>

[zerokilled]

me imaginaba que tu tema iba por ese lado pero a mi parecer no estaba bien expuesto ese aspecto. lo que tu busca son procesos sincronizados con el tiempo. es decir, intervalos de Xs tiempo -en tu caso de 30 minutos- sincronizado con la hora actual del usuario. o sea, por poner un ejemplo, a las 9:00, 9:30, 10:00, 10:30, etc. ¿estoy en lo correcto?

[fredyossa]

Iniciado por zerokilled

me imaginaba que tu tema iba por ese lado pero a mi parecer no estaba bien expuesto ese aspecto. lo que tu busca son procesos sincronizados con el tiempo. es decir, intervalos de Xs tiempo -en tu caso de 30 minutos- sincronizado con la hora actual del usuario. o sea, por poner un ejemplo, a las 9:00, 9:30, 10:00, 10:30, etc. ¿estoy en lo correcto?

De pronto es eso, no me he sabido dar a entender. replanteo:

• La web es de reproducción de música, por lo tanto los usuarios van a permanecer mucho tiempo en ella.
  
• El fondo es solo para que se vea algo diferente, seria como una especie de reloj de sol (posición del sol según la hora) son 24 fotos de mi pueblo a una foto por hora.
  
• No necesariamente el refresco debe ser cada media hora lo coloque así solo por manejar un lapso y por ignorancia en el tema, si se puede que cambie solo cada hora sincronizado con el tiempo del servidor (combinado con php) mucho mejor, es mas yo tengo un saludo según la hora del día (buenos días, buenas tardes etc. según la hora del servidor).
  
• Pido disculpas por no ser más claro desde un principio, y lo tendré en cuenta para una próxima. Mientras tanto deseo por favor seguir aprendiendo con sus respuestas desinteresadas. Gracias