En esta página:
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
|
1 2 3 |
<body onload="mostrarSaludo()"> |
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
|
1 2 3 4 5 6 7 8 9 |
<div id="saludo" class="mb-5 mt-5"> <img name="tiempo"> <div id="txtsaludo"></div> </div> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
function mostrarSaludo(){ fecha = new Date(); hora = fecha.getHours(); if(hora >= 0 && hora < 12){ texto = "Buenos Días"; imagen = "img/dia.png"; } if(hora >= 12 && hora < 18){ texto = "Buenas Tardes"; imagen = "img/tarde.png"; } if(hora >= 18 && hora < 24){ texto = "Buenas Noches"; imagen = "img/noche.png"; } document.images["tiempo"].src = imagen; document.getElementById('txtsaludo').innerHTML = texto; } |
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.
