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:
- var a = new Date();
- //creado por https://joason.com
- var hora = a.getHours();
- if(hora >= 1 && hora<= 3){document.write("Buenas Noches")};
- if(hora >= 4 && hora<= 14){document.write("Buenos Días")};
- if(hora >= 15 && hora<= 19){document.write("Buenas Tardes")};
- 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í:
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:
El código quedaría de la siguiente manera:
- var a = new Date();
- //creado por https://joason.com
- var hora = a.getHours();
- if(hora >= 1 && hora<= 9){document.write("Cerrado")};
- if(hora >= 10 && hora<= 14){document.write("Abierto")};
- if(hora >= 15 && hora<= 16){document.write("Cerrado")};
- if(hora >= 17 && hora<= 20){document.write("Abierto")};
- if(hora >= 21 && hora<= 24){document.write("Cerrado")};
Y se veía así:
Pudiendo poner imagen en lugar de texto modificando lo siguiente:
- var a = new Date();
- //creado por https://joason.com
- var hora = a.getHours();
- if(hora >= 1 && hora<= 9){document.write("<img border='0' src='aqui_la_imagen_cerrado.png' width='XXX' height='xxx'/>")};
- if(hora >= 10 && hora<= 14){document.write("<img border='0' src='aqui_la_imagen_abierto.png' width='XXX' height='xxx'/>")};
- if(hora >= 15 && hora<= 16){document.write("<img border='0' src='aqui_la_imagen_cerrado.png' width='XXX' height='xxx'/>")};
- if(hora >= 17 && hora<= 20){document.write("<img border='0' src='aqui_la_imagen_abierto.png' width='XXX' height='xxx'/>")};
- 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