Comunidad de diseño web y desarrollo en internet

Mostrar imagen de día, tarde o noche con Javascript

Quiero compartir con ustedes un script que diseñé para una web. Dependiendo de la hora de la PC del usuario, una imagen de tarde, noche o día se mostrará. Para los que no saben, Javascript usa la hora local de la PC del usuario.

Usaremos 3 imágenes:


  • dia.jpg
  • tarde.jpg
  • noche.jpg

Y todas estas imágenes las guardamos en una carpeta llamada img. Luego colocamos dentro de las etiquetas <head> </head> nuestro javascript:

Código :

/* En Javascript new Date(); nos devuelve o nos inicia una nueva fecha y la enviamos a que esté dentro de la variable ahora. */

/* En Javascript: getHours(); nos devuelve la hora de la PC del usuario y la enviamos a que esté dentro de la variable hora. */

<script type="text/javascript">

function mostrarSaludo(){
ahora=new Date(); 
hora=ahora.getHours();


/*  En estas 4 líneas le decimos que: si la hora de la PC es menor a 12 PM, que muestre el saludo: Buenos Días y a su vez que nos muestre nuestra imagen: dia.jpg . * /

if(hora<12){
texto="Buenos D\u00edas";  
imagen="img/dia.jpg";
}


/* Las demás líneas hacen lo mismo: si la hora de la PC es tal, entonces que nos muestre el saludo correspondiente y también su imagen correspondiente. */

if(hora>12 && hora<18){
texto="Buenas Tardes";
imagen="img/tarde.jpg";
}

if(hora>18 && hora<24){
texto="Buenas Noches";
imagen="img/noche.jpg";
}


/* Acá le decimos que nos muestre la imagen (día, tarde o noche) en el destino con ID: tiempo. */
document.images["tiempo"].src=imagen;


/* Acá le decimos que nos muestre el saludo (Buenos días, Buenas tardes o Buenas Noches) en el siguiente destino con ID: saludo. */
document.getElementById('saludo').innerHTML = texto;

}

</script>



Dentro de las etiquetas <body> </body> colocamos nuestros contenedores, capas o divs. De la siguiente manera:

Código :

<body onload="mostrarSaludo()">

<div id="saludo"></div>

<div id="img"><img name="tiempo"></img></div>

</body>



Podemos ver que en la apertura de nuestra etiqueta <body> </body> lo siguiente:

Código :

 <body onload="mostrarSaludo()"> </body> 

Pues allí estoy llamando a la función que se creó en Javascript para mostrar las imágenes. Y le estamos diciendo que al hacer un onload (terminar de cargar nuestro body o todo nuestro contenido que está en el body), que cargue el script y que funcione.

VER DEMO

Espero les haya gustado!

Cristalab y Mejorando.la te traen el increíble Curso de Estrategia Digital y Marketing. Online, a tu ritmo, con diploma de certificación y clases en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate