Usaremos 3 imágenes:
- dia.jpg
- tarde.jpg
- noche.jpg
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!
No hay comentarios:
Publicar un comentario