Mostrar un Saludo según la Hora del Día con Javascript

Javascript

Demo Github

Javascript nos da la posibilidad de crear aplicaciones Front geniales, en este articulo vamos a crear un módulo que nos imprima un saludo de Buenos Días, Buenas Tardes y Buenas Noches según el horario del día, aparte del Texto de Saludo vamos a mostrar un icono que indique que hora del día es la que el usuario esta visitando, vamos con el artículo.

La Vista

En la etiqueta de apertura <body> le diremos que cargue Javascript del saludo cada ves que la pagina web se cargue, para ello agregamos el Evenot onLoad en donde agregamos la función mostrarSaludo() que será llamada cada ves que cargue la web

Ahora vamos a Crear un contenedor general llamado ‘saludo’ y le colocaremos 2 clases nativas de Bootstrap 4 para darle 5 de Margin Bottom(mb-5) y 5 de Margin Top(mt-5)

Dentro del contenedor colocamos 2 elementos una <img> en donde imprimiremos una imagen que acompañe al texto del saludo y otra capa(div) llamada ‘txtsaludo’ en donde se imprimirá el Texto del Saludo

Javascript

Vamos a usar la función new Date() para obtener la fecha actual y la función getHours(), con ambas funciones calcularemos el tiempo actual, luego calculamos con if() la hora en números por criterio usaremos la hora del sistema del usuario, desde 00 horas a 24 horas y en nuestro código calcularemos mediante ese criterio

Por ultimo creamos una carpeta img y dentro de ella colocamos 3 imágenes: dia.png, tarde.png y noche.png , Estas imágenes se mostrarán junto con el texto del saludo.

Si deseas ver el resultado puedes ver la Demo que esta al inicio de este artículo.

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.
Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required