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.