Hoy vamos a tocar un area que hasta ahora no habimos mencionado. Vamos a ver como se peude crear una cuentra atrás que nos mostrará los dias,horas,minutos y segundos que faltan hasta una fecha que le pasemos a través de los parametros de la función.
Está realizado enteramente en javascript apoyado, como es obvio de un código html sobre el que se cargará los datos y se irán actualizando.
Lo primero que vamos a ver será la función javascript que realiza toda la operación de cuenta atrás:
<script type="text/javascript">
function countDown(repite,a,me,d,h,m,s){
var form=document.getElementById('form');
if (repite=='true'){
var anyo=a;
var mes=me-1;
var dia=d;
var hora=h;
var minuto=m;
var segundo=s;
var La_fecha = new Date();
var La_fecha_total = new Date(anyo,mes,dia,hora,minuto,segundo);
toSecond = (La_fecha_total - La_fecha)/1000
toDay = parseInt(toSecond/86400);
toSecond=toSecond-(toDay*86400);
toHour = parseInt(toSecond/3600);
toSecond=toSecond-(toHour*3600);
toMinute=parseInt(toSecond/60);
toSecond=parseInt(toSecond-(toMinute*60));
}
toSecond=toSecond-1;
if(toSecond<0)
{
toSecond=59;
toMinute=toMinute-1;
}
form.second.value=toSecond;
if(toMinute<0)
{
toMinute=59;
toHour=toHour-1;
}
form.minute.value=toMinute;
if(toHour<0)
{ toHour=23;
toDay=toDay-1;
}
form.hour.value=toHour;
form.day.value=toDay;
if(toDay<0)
{
form.second.value=0;
form.minute.value=0;
form.hour.value=0;
form.day.value=0;
}
else{
setTimeout("countDown('false')",1000);
}
}
</script>
Esta función necesita que le pasemos un booleano que estará a true en la llamada inicial, el año,mes,dia,hora,minuto y segundo de la fecha final de la que queremos calcular el tiempo restante que queda.
La función calculará automáticamente los días,horas,minutos y segundos que faltan desde la fecha actual hasta la fecha que le pasemos.
La forma de llamadar a esta función desde nuestra página HTML debería ser la siguiente:
<html>
<head>
</head>
<body onload="countDown('true','2010','4','12','13','31','14')" >
<form id="form" name="form" align="center">
<div>
<input type="text" size="1" class="form_input" name="day" readonly>
<span class="texto_contador">DIAS</span></input>
<span class="hora">
<input type="text" size="1" class="form_input" name="hour" readonly>
<span class="texto_contador">:</span></input>
<input type="text" size="1" class="form_input" name="minute" readonly>
<span class="texto_contador">:</span></input>
<input type="text" size="1" class="form_input" name="second" readonly>
</span>
</div>
</form>
</body>
</html>
Como podemos ver, el script irá actualizando los valores de los <input/> hasta que llegue a 0 en todos sus campos, momento en el cual se parará. Sólo nos faltaría darle un poco de estilo con css para darle una buen presentación y estaría listo.
body {
background: #ecf2f6;
}
.form_input {
font-family: Verdana;
font-size:15px;
color: #ffffff;
border-width:0;
background: #ffb520;
text-align: center;
font-weight:bold;
}
.hora {
margin-left:0%;
}
.texto_contador{
font-family: Verdana;
font-size:15px;
}
De esta forma podeis tener vuestra cuenta atrás ,por ejemplo,para poner el tiempo restante para un evento o el tiempo que queda para que termine una subasta.
Espero que os haya gustado.