viernes, 4 de junio de 2010

Reloj contador que cuenta hacia atrás


Código: (Puede ir en la sidebar o arriba de </head>)
<SCRIPT LANGUAGE="JavaScript">
//<![CDATA[
// By: Vku. - http://loseasi.blogspot.com
function getTime() {
now = new Date();
y2k = new Date("Dec 31 2010 23:59:59"); //Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"
days = (y2k - now) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (y2k - now) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (y2k - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (y2k - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);
sec = (secondsRound == 1) ? " segundo." : " segundos.";
min = (minutesRound == 1) ? " minuto," : " minutos, ";
hr = (hoursRound == 1) ? " hora," : " horas, ";
dy = (daysRound == 1) ? " día," : " días, "
document.timeForm.input1.value = "Faltan: " + daysRound + dy + hoursRound + hr + minutesRound + min + secondsRound + sec + " Para terminar el año!!";
newtime = window.setTimeout("getTime();", 1000);
}
window.onload=getTime
//]]>
</script>

Código para mostrar Reloj: (Se pone en el lugar que quieran mostrarlo)
<form name=timeForm>
<input type="text" name=input1 size=80 style="border:0;padding:2px;font:12px arial, helvetica,sans-serif;text-align : center;background-color:#111111;color:#ffffff">
</form>

El ejemplo esta mostrando los días que faltan para que termine el año.

Se puede modifucar las lineas mostradas en Rojo y en Azul.
En Rojo es el mes como se muestra en Naranja.
En Azul estan el día, año, hora, minutos y segundos.
Mas abajo también en Azul el texto antes y despues del reloj. (se puede eliminar si se quiere)

El reloj se puede modificar con estilos Css.
Yo le puse un fondo negro con letras blancas y un tamaño de fuente de 12px. (cambiar a gusto)

No hay comentarios:

Publicar un comentario