| Demo | Este codigo JavaScript nos permite mostrar toda clase de frases segun la hora establecida en el computador del visitante. Los mensajes a mostrar puedes modificarlos según tus intereses, al igual que las propiedades css. |
Este es el script y donde lo pongas aparecerá el mensaje:
<script language="javascript" type="text/javascript">
document.write("<div id='saludo'>")
day = new Date()
hr = day.getHours()
if (hr == 1) document.write("Son mas de la 1 am, ¿aun despierto?")
if (hr == 2) document.write("Son mas de la 2 am, ¿aun despierto?")
if (hr == 3) document.write("Son mas de la 3 am, ¿aun despierto?")
if (hr == 4) document.write("Son mas de la 4 am, ¿aun despierto?")
if (hr == 5) document.write("Son mas de la 5 am, ¿aun despierto?")
if (hr == 6) document.write("Son mas de las 6 am, Bostezoo!")
if (hr == 7) document.write("Buenos dias! Ya son mas de las 7 am.")
if (hr == 8) document.write("Son mas de las 8 am, organiza bien tu dia.")
if (hr == 9) document.write("Son mas de las 9 am")
if (hr == 10) document.write("Son mas de las 10 am, Hora del café!")
if (hr == 11) document.write("Son mas de las 11 am")
if (hr == 12) document.write("Es de mediodía")
if (hr == 13) document.write("Ya son mas de la 1 pm, buenas tardes!")
if (hr == 14) document.write("Son mas de las 2 pm")
if (hr == 15) document.write("Son mas de las 3 pm")
if (hr == 16) document.write("Son mas de las 4 pm")
if (hr == 17) document.write("Good Evening! It's after 5 pm")
if (hr == 18) document.write("Ya son mas de las 6 pm, hora de cenar!")
if (hr == 19) document.write("Son mas de las 7 pm")
if (hr == 20) document.write("Son mas de las 8 pm")
if (hr == 21) document.write("Son mas de las 9 pm")
if (hr == 22) document.write("Son mas de las 10 pm")
if (hr == 23) document.write("Son mas de las 11 pm, a la cama!")
if (hr == 0) document.write("ya es media noche.")
document.write("</div>")
</script>
si lo dejas asi verás algo como esto en tu plantilla:
#saludo {
width:200px;
background:#69C url(url-fontdo.png) right bottom no-repeat;
color:#FFF;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
padding: 77px 4px 10px 4px;
cursor:pointer;
border: 2px solid #6CC;
-ms-border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
Y el resultado es este:
Nuestra cajita de frases ya está terminada, pero quise añadir un pequeño efecto con scriptaculous visto en vagabundia, asi que encerré el script dentro de la capa #CambiarOpacidad.
<div id="CambiarOpacidad" style="filter:alpha(opacity=100); opacity:1;" onclick="javascript:changeOpacity('CambiarOpacidad')"></div>
y agregué este codigo antes de </head> :
<script type="text/javascript">
//<![CDATA[
function changeOpacity(id) {
$opacityStatus = $(id);
if($opacityStatus.value==0) {
new Effect.Opacity(id, {duration:0.5, from:0.4, to:1.0});
$opacityStatus.value = 1;
} else {
new Effect.Opacity(id, {duration:0.5, from:1.0, to:0.4});
$opacityStatus.value= 0;
}
}
//]]>
</script>
Finalmente puedes ver como funciona aqui.
2 comentarios
Muchas Gracias por postear este codigo, estuve tratando de hacer este codigo y no me salia, muchas gracias
Posted on 6/08/2010 11:50 a. m.
De nada amigo, con el mayor de los gustos :)
Posted on 6/08/2010 11:53 a. m.
Publicar un comentario en la entrada al viejo estilo