viernes, 13 de abril de 2018

Cambiar mensaje según la hora del día con javascript

Hoy os voy a enseñar a hacer algo que quedará visualmente bien en la web, saludar al visitante de diferente manera según la hora del día.

Si viene por la mañana: buenos días

Por la tarde: buenas tardes


Y por la noche: buenas noches.

El código es muy sencillo y no tiene mayor complicación.Digamos que queremos saludar con el texto "Buenos días" de 4:00  a 14:00, con el texto "Buenas Tardes" de 14:00 a 20:00 y con el texto "Buenas Noches" de 20:00 a 4:00, lo haríamos colocando el siguiente código:

  1. var a = new Date();
  2. var hora = a.getHours();
  3. if(hora >= 1 && hora<= 3){document.write("Buenas Noches")};
  4. if(hora >= 4 && hora<= 14){document.write("Buenos D&iacute;as")};
  5. if(hora >= 15 && hora<= 19){document.write("Buenas Tardes")};
  6. if(hora >= 20 && hora<= 24){document.write("Buenas Noches")};



Cambiaremos las horas a nuestro gusto para adaptar el saludo a nuestras necesidades.
El código se veía así:


Teniendo en cuenta que este código podríamos utilizarlo entre otros usos para poner el horario de atención al público y decirle al visitante si estamos abierto o cerrado.
El código quedaría de la siguiente manera:


  1. var a = new Date();
  2. var hora = a.getHours();
  3. if(hora >= 1 && hora<= 9){document.write("Cerrado")};
  4. if(hora >= 10 && hora<= 14){document.write("Abierto")};
  5. if(hora >= 15 && hora<= 16){document.write("Cerrado")};
  6. if(hora >= 17 && hora<= 20){document.write("Abierto")};
  7. if(hora >= 21 && hora<= 24){document.write("Cerrado")}; 


Y se veía así:



Pudiendo poner imagen en lugar de texto modificando lo siguiente:



  1. var a = new Date();
  2. var hora = a.getHours();
  3. if(hora >= 1 && hora<= 9){document.write("<img border='0' src='aqui_la_imagen_cerrado.png' width='XXX' height='xxx'/>")};
  4. if(hora >= 10 && hora<= 14){document.write("<img border='0' src='aqui_la_imagen_abierto.png' width='XXX' height='xxx'/>")};
  5. if(hora >= 15 && hora<= 16){document.write("<img border='0' src='aqui_la_imagen_cerrado.png' width='XXX' height='xxx'/>")};
  6. if(hora >= 17 && hora<= 20){document.write("<img border='0' src='aqui_la_imagen_abierto.png' width='XXX' height='xxx'/>")};
  7. if(hora >= 21 && hora<= 24){document.write("<img border='0' src='aqui_la_imagen_cerrado.png' width='XXX' height='xxx'/>")};

Y como podéis ver, modificando el código podemos utilizarlo para muchas otras cosas.



Espero que os haya sido útil, cualquier duda consultar.


Un saludo.

No hay comentarios:

Publicar un comentario

Para insertar código html en tu comentario,convertir aquí