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!
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
sólo agregalo como respuesta en este hilo de posts y yo lo edito.
muchas gracias!
editado - mariux
saludos.
Haber te dejo una solucion solo cambia esta parte o estructura:
<?php /* --- FUNCION --- */ ?>
<script type="text/javascript">
function mostrarSaludo(){
ahora=new Date();
hora=ahora.getHours();
if(hora>7 && hora<12){
texto="Buenos D\u00edas";
imagen="img/dia.jpg";
}
if(hora>11 && hora<1
texto="Buenas Tardes";
imagen="img/tarde.jpg";
}
if(hora>17 && hora<24){
texto="Buenas Noches";
imagen="img/noche.jpg";
}
document.images["tiempo"].src=imagen;
document.getElementById('saludo').innerHTML = texto;
}
</script>
<?php /* --- FIN FUNCION --- */ ?>
</head>
Y tienes razon no muestra nada en ese rango, entonces restandole una hora inicial que toma, ya me muestra ya que Si te fijas en el código poongo que si la hora es superior a siete e inferior a doce que salga una imagen determinada. Estamos hablando de horas, prescindimos de los minutos, por lo que las 7.30 las seguirá tomando como 7 porque sólo toma el número de la hora: el 7 y 7 no es superior a 7. No sé si me explico.
pepoflex :
cuando posteas código debes usar las etiquetas [code] desde el editor. Así evitas esos errores y el código queda resaltado y mas legible. Usalo de ahora en mas por favor.
if(hora>11 && hora<1{ <------- alli restale 1 hora a la hora inical, antes era 12 ahora le baje una hora y quedo en 11.
Por jjjericu el 22 de Marzo de 2012
if(){
}elseif(){
}u
Por barna09 el 22 de Marzo de 2012
muy interesante, solo una cosa la hora que coge es del servidor donde está alojado el archivo verdad? No es como el getTime() de flash que coge la hora del ordenador ¿Exacto?
muchas gracias,
saludos
Es como el objeto Date de Flash ( Date.getTime() son los milisegundos ).
Por Juan Alberto el 23 de Marzo de 2012
Saludos
Siempre declara las variables con el prefijo "var". Siempre.
Saludos.
Por Raxiro el 26 de Marzo de 2012
Código :
if(hora>7 && hora<12){ texto="Buenos D\u00edas"; imagen="img/dia.jpg"; } if(hora>11 && hora<1{ texto="Buenas Tardes"; imagen="img/tarde.jpg"; }Eso está muy mal, entiendo tu solución de restarle una hora al segundo if para que siempre muestre un saludo, pero:
1.- Tenés soluciones más apropiadas
2.- Muestra Buenas Tardes a las 11 de la mañana!!!
1.- Con un simplemente menor o igual solucionas eso!!!!
Código :
if( hora > 7 && <= 12 ){ .... }2.- Mirá tu código: supongamos que son las 11:30 AM,
Al primer IF entra ya que 11:30 < 12 = True.
Sigue leyendo el código y entra al segundo IF!!! Entonces reemplaza el texto y la imagen.
Otra forma de solucionarlo es como te dijeron arriba con un IF ELSE IF, pero "jjjericu" dijo que lo pongas para que sea mas elegante, uno no programa para que el código quede elegante, uno programa para el código funciona, si algún día se ponen de moda las exposiciones de código JS en galerías de Arte podemos hablar...
Algo a tener en cuenta... en Javascript no existe el IF ELSE IF convencional, sino una forma más "tramposa" de hacerlo.
Código :
if( hora > 7 && < 12 ){ ....}else if( hora >11 && < 18 ){ .... }En fin, espero que lo tomes como una critica constructiva, creo que es un grave error porque no es un error de sintaxis, sino en la forma de como solucionar algo a nivel programación, yo ya tengo muchos años de experiencia, pero cuando empecé me mande cagadas mucho más jodidas
http://www.jrcl.16mb.com/tutoriales/Mostrar_imagen_dia_tarde_noche_javascritp/index.php
enjoy !
http://jrcl.net76.net/dm/Mostrar_imagen_dia_tarde_noche_javascritp/index.php
Por sarahi el 07 de Enero de 2015
Por Nelson Valenzuela el 02 de Septiembre de 2015
Muchas gracias., [email protected]
Por Anonimo el 07 de Abril de 2016