Necesito cambiar imagenes de acuerdo a la fecha y la hora

[JorgeAnzola25]

Hola amigos, necesito hacer que una imagen cambie con respecto a la hora y la fecha (El mes), es decir que, por ejemplo, una noche de marzo tenga una imágen, luego un día de diciembre tenga otra y una noche también de diciembre tenga otra imagen, no sé si es mucho pedir, pero nada es imposible.

[Batan]

Código Javascript:

var fecha=new Date();
 
if fecha = 01/02/2011 && fecha.getHours(){
document.body.style.backgroundImage = url("tu-imagen");
}
 

Pero esto de cara a usuarios que residen en paises donde las estaciones del año cambian no queda nada bien.

Saludos.

[rafa_yael]

function obteniendoFecha () {

var fecha = new Date();
//Con esto obtienes la fecha de la maquina, asi no te preocupas por horarios diferentes.
var mes = fecha.getMonth()+1;//Le sumamos uno para que no nos de la numeracion desde cero.
var diaMes = fecha.getDate();
var cont = diaMes+''+mes; //Aqui obtenemos una cadena como '298', que son el dia y el mes.
//Compruebas la fecha, que en este caso pondre el 10 de mayo
if (cont == '105' ){
//Y aqui pones tu codigo para cambiar imagen.
}


}

Espero te funcione, soy nuevo en esto pero poquito a poco vamos aprendiendo.

[JorgeAnzola25]

Lo que quiero cambiar es un logo del banner, ¿Para eso tengo que cambiar document.body.style.backgroundImage?

Y donde dice

Código PHP:

  if fecha = 01/02/2011 
   

¿Puedo poner los meses?, O sea

Código PHP:

  if fecha = January 
   

y por último, ¿tengo que poner ese script 12 veces con cada mes del año?

No sé nada de programación, por eso tantas preguntas, gracias.

[rafa_yael]

Código Javascript:

var fecha = new Date();
//Con esto obtienes la fecha de la maquina, asi no te preocupas por horarios diferentes.
var mes = fecha.getMonth()+1;//Le sumamos uno para que no nos de la numeracion desde cero.
var diaMes = fecha.getDate();
var cont = diaMes+''+mes; //Aqui obtenemos una cadena como '298', que son el dia y el mes.
//Compruebas la fecha, que en este caso pondre el 10 de mayo
if (cont == '105' ){
//Y aqui pones tu codigo para cambiar imagen.
}
 

Estaba editando este mensaje cuando respondiste y no pude publicarlo, pero bueno, haber si este codigo te sirve.

[Batan]

No hombre, era cambiarle el logo pues llamas a su identificador, por ejemplo si tuvieras una id en tu logo, lo llamarias con document.getElementById('logo')

Para la fecha... al quererlo cada mes, pues tendrias que usar la llamada a la fecha

var fecha = new Date();
mes = fecha.getMonth() + 1;

Y de ahi ya creas las condicionales.
if mes = 4{
document.getElementById('logo').style.backgroundIm age = url("image.png")
}

Para escribir menos código podrias guardar el logo en una variable y despues asignarle el backgroundImage que quieras para la fecha que quieras.

var logo = document.getElementById('logo').style;

Código Javascript:

if mes = 2{
     logo.backgroundImage = url('imagen');
}
 
if mes = 3{
     logo.backgroundImage = url('imagen');
}
 

Y en el HTML crear un evento onload para que el script se ejecute al cargar tu página.


Saludos

[rafa_yael]

Iniciado por JorgeAnzola25

Lo que quiero cambiar es un logo del banner, ¿Para eso tengo que cambiar document.body.style.backgroundImage?

Y donde dice

Código PHP:

  if fecha = 01/02/2011 
   

¿Puedo poner los meses?, O sea

Código PHP:

  if fecha = January 
   

y por último, ¿tengo que poner ese script 12 veces con cada mes del año?

No sé nada de programación, por eso tantas preguntas, gracias.

Para eso primero tienes que obtener el src de la imagen de la siguiente manera.

Código Javascript:

var SrcDeTuImg = document.getElementByID('Id');
// una vez que lo tienes utilizas el codigo que te pase
var fecha = new Date();
//Con esto obtienes la fecha de la maquina, asi no te preocupas por horarios diferentes.
var mes = fecha.getMonth()+1;//Le sumamos uno para que no nos de la numeracion desde cero.
var diaMes = fecha.getDate();
var cont = diaMes+''+mes; //Aqui obtenemos una cadena como '298', que son el dia y el mes.
//Compruebas la fecha, que en este caso pondre el 10 de mayo
if (cont == '105' ){
//Y aqui pones...
 
SrcDeTuImg.src='/logos/tulogo.png'
 
}
 

[rafa_yael]

Iniciado por Batan

No hombre, era cambiarle el logo pues llamas a su identificador, por ejemplo si tuvieras una id en tu logo, lo llamarias con document.getElementById('logo')

Para la fecha... al quererlo cada mes, pues tendrias que usar la llamada a la fecha

var fecha = new Date();
mes = fecha.getMonth() + 1;

Y de ahi ya creas las condicionales.
if mes = 4{
document.getElementById('logo').style.backgroundIm age = url("image.png")
}

Para escribir menos código podrias guardar el logo en una variable y despues asignarle el backgroundImage que quieras para la fecha que quieras.

var logo = document.getElementById('logo').style;

Código Javascript:

if mes = 2{
     logo.backgroundImage = url('imagen');
}
 
if mes = 3{
     logo.backgroundImage = url('imagen');
}
 

Y en el HTML crear un evento onload para que el script se ejecute al cargar tu página.


Saludos

Hoo, muy buena esa. En estos foros siempre se aprende mucho.

[JorgeAnzola25]

Estoy realmente muy perdido Jajaja disculpen mi ignorancia, pueden poner el código completo para ver como queda, estoy algo enredado.

[rafa_yael]

¿No ha funcionado el codigo en tu pagina? ¿O no sabes implementarlo? Para saber como explicarte XD.

[JorgeAnzola25]

Jajaja aún no he empezado a hacer la página, estoy primero resolviendo lo de este código, CREO que sé como implementarlo, se pone <script></script> en el head del código, ¿no? Disculpen es que no se nada de Javascript

[rafa_yael]

Asi es, el codigo puedes escribirlo directamente en tu pagina es esas etiquetas. Solo cambia en la linea que dice:

Código Javascript:

var SrcDeTuImg = document.getElementByID('Id')
 

;

la palabra 'Id' por el que utilizas en tu logo. Este tiene que estar entre comillas.

Y esta parte:

Código Javascript:

if (cont == '105' ){
//Y aqui pones...
 
SrcDeTuImg.src='/logos/tulogo.png'
 
}
 

La repites segun la cantidad de fechas que quieras poner, siempre respetando el formato para que no haya errores, por ejemplo:

Código Javascript:

if (cont == '105' ){
//Dia de las madres
 
SrcDeTuImg.src='/logos/logodelamama.png'
 
}
 
if (cont == '314' ){
//Dia de los niños.
 
SrcDeTuImg.src='/logos/logodelascrias.png'
 
}
 

[JorgeAnzola25]

Ok, ¿y todas las repeticiones irán en el mismo <script></script> o se ponen por separado? y con respecto a la hora, ¿también se puede?, y por último ¿cómo lo haría desde un archivo externo? creo que así sería mejor, el código quedaría más limpio.

[rafa_yael]

Todo lo que sea javascript va ir dentro de las etiquetas <script></script>, junto, oviamente ordenado para que lo entiendas.

Del reloj si se puede, solo hay que agregarle mas codigo a lo que hay. Te paso un reloj echo para que lo estudies.

Código Javascript:

//Este reloj lo declaro dentro de una funcion para llamarlo cada segundo, y tener un reloj con segundero.
 
function reloj () {
  
  var reloj    = new Date();
  var horas    = reloj.getHours();
  var minutos  = reloj.getMinutes();
  var segundos = reloj.getSeconds();
  var sufijo   = 'am';  // Este es para el sufijo de la hora, am y pm, pero solo lo declaro como am para despues modificarlo con una comparacion.
  
  if (horas>12) {
    horas = horas -12;
    sufijo ='pm'
  }; //Lo que se hace aqui es comprobar si son mas de las doce. Si son las 13 horas, automaticamente resta doce para obtener la 1 y agrega como sufijo 'pm'
  
  if (horas   <10)  { horas    = '0'+ horas;   }
  if (minutos <10)  { minutos  = '0'+ minutos; }
  if (segundos<10)  { segundos = '0'+ segundos;}
  
//Con este pongo un cero a la izquierda. Si es la 1:32 me pone como 01:32 pm.
 
  document.getElementById('Id').innerHTML = horas +':'+ minutos+':'+ segundos+ ' '+sufijo; 
//Esta linea escribe el la pagina html. Sustituye la palabra 'id' por el id de el div donde pienses escribir la hora.(Siempre entre comillas.) 
 
  setInterval('reloj()',1000);
//Esta ultima linea repite esta funcion cada segundo, esto para que tengas fecha actual.
 
}
 
widow.onload= reloj();
//Esta linea comienza la magia llamando la funcion al cargar la pagina.
 

Para sacarlo a una hoja externa basta que utilises las mismas etiquetas de la siguiente manera:

Código HTML:

<script type="text/javascript" src="hojaexterna.js"></script>
 

La hoja tiene que estar guardada en el mismo directorio que la pagina html, de preferencia la raiz para utilizarlo en todas las paginas.

[JorgeAnzola25]

Vaya, lo de la hora si está complicado, voy a ponerme a hacerlo y cualquier cosa escribo por aquí, muchas gracias

[rafa_yael]

Espera, me he equivocado. No es ese el codigo que quieres, entendi otra cosa. Ese solo te sirve para la hora, nesecito que me expliques como quieres que cambie la imagen respecto a la hora.

[JorgeAnzola25]

Ok mira, lo que quiero en general es esto, que el logo cambie con respecto a la fecha y también la hora, es decir.

Si te metes a la página un 24 de diciembre en el día, hasta las 7pm, por ejemplo, salga una imagen navideña pero con el sol, por decirte algo.

Pero si te metes ese mismo día después de las 7pm, salga una imagen navideña pero nocturna, con la luna.

¿Sí me explicqué?

Si puedes poner el código completo me ayudaría más, así los entiendo más facilmente.

[rafa_yael]

Este podria ser un codigo para cambiar la imagen respecto a la hora, agregare unas cuantas lineas a lo que ya te habia dado. Olvida el de la funcion reloj, solo sirve para ver la hora. XP.. me fallan los lentes.


Ahora si, el codigo seria el siguiente.

Código Javascript:

//Esta linea es para obtener tu logo.
var SrcDeTuImg = document.getElementByID('Id');
// una vez que lo tienes utilizas el codigo que te pase
 
var fecha = new Date();//Este es para que puedes obtener la hora de la maquina.
 
 
var mes = fecha.getMonth()+1;//Le sumamos uno para que no nos de la numeracion desde cero.
 
var diaMes = fecha.getDate();//Este es el dia del mes.
 
var horas    = reloj.getHours();//Obtenemos la hora, es nuevo codigo.
 
var cont = diaMes+''+mes; //Aqui obtenemos una cadena como '298', que son el dia y el mes.
 
 
//Compruebas la fecha, que en este caso pondre el 10 de mayo.
if (cont == 105 ){
//Y aqui pones...
 
SrcDeTuImg.src='/logos/tulogo.png'
 
}
 
//Para cambiar la img con respecto a la hora utilizas este if.
 
if (hora == 12 ){
 
SrcDeTuImg.src='/logos/tulogoalas12.png'
 
}//Aqui ocupas señalar la hora en formato militar, si te fijas, cambie la variable "cont" que unia dia y mes por la variable hora que me da la hora de la maquina. Compruebo si hay una igualdad a 12, si la hay muestra la imagen.
 

[rafa_yael]

Me falto codigo, habria que concatenar la fecha y la hora para comprobar que sea el dia y la hora especifica (valga la redundancia).


Para ese fin utiliza estas lineas:

Código Javascript:

if (cont == 105){
     if (hora>0||hora<7){
SrcDeTuImg.src='/logos/tulogoentrelas0horasylas7.png'
  }
}
 

Aqui modifica nada mas los valores numericos de la hora para que se adapten a los que ocupas, y pues tambien la fecha. Espero te funcione.

[JorgeAnzola25]

Creo que ya estoy viendo la luz, podría reemplazar lo de la hora por if (hora < 19 && > 6) o algo así, de modo que se facilite poner la imagen de noche o de día, espero haberme explicado.

[JorgeAnzola25]

envié el mensaje anterior antes de refrescar la página, eso era lo que necesitaba, veamos a ver si me sale Jajaja xD

[rafa_yael]

De echo, tu codigo esta bien, yo utilize los operadores OR || en vez de AND &&, xD. Modifica esa parte, si no, nunca te funcionara.

Tiene que quedar asi:

Código Javascript:

if (cont == 105){
     if (hora>0&&hora<7){
SrcDeTuImg.src='/logos/tulogoentrelas0horasylas7.png'
  }
}
 

[JorgeAnzola25]

Ok, ok, ¿y los días con un solo dígito, ejemplo, el 1ero de enero, sería if (cont == 11) o (cont == 0101)?

[rafa_yael]

No, seria (cont == 11).

[JorgeAnzola25]

¿La imagen con id sería así <img src="imagenes/logo.jpg" id="logo">?

[rafa_yael]

Si, asi seria.

[JorgeAnzola25]

No sirve :( O no lo estoy haciendo bien, aquí te dejo el link para que descargues un paquete que contiene el "Inde.html" y la carpeta de imagenes que utilizo, [URL="http://www.megaupload.com/?d=4JBCACNT"]http://www.megaupload.com/?d=4JBCACNT[/URL]
Espero puedas ayudarme

[rafa_yael]

Disculpa la tardanza en contestar, resulta que se robaron los cables de telefono y duraron una semana en ponerlos de nuevo.

Funciona bien el codigo, solo que tenias errores de sintaxis. Te pongo el nuevo codigo.

Código Javascript:

//Agregue esta linea para que cargue los al final y no al principio, de otra manera te devuelve "null".
window.onload = function (){ 
 
var SrcDeTuImg = document.getElementById('logo');//Aqui tenias un error, "getElementById" tenia la  "d"en mayusculas.
var fecha = new Date();
var mes = fecha.getMonth()+1;
var diaMes = fecha.getDate();
var hora    = fecha.getHours();//Aqui no tomavas la variable fecha para conseguir la hora, si no mas bien una que decia reloj, que no se de donde salio xD.
var cont = diaMes+''+mes;
if (cont == 99){//Para ver que funcione pon la fecha del dia que lo quieras comprobar, XD, ovio creo ....
     if (hora>0&&hora<13){ //Asegurate de que este rango contega la hora que es!!!, para que no tengas que esperar a ver si el codigo funka.
SrcDeTuImg.src ='imagenes/2.jpg';
  }
}
}//fin de la funcion
 

Por lo demas, el codigo html esta bien. Espero que te sirva.