Compte Enrere HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bon Dia Catalunya</title>
<style type="text/css">
<!--
.Estilo1 {
    color: #FFFF00;
    font-weight: bold;
    font-size: x-large;
}
body {
    background-image: url(senyera.jpg);
    background-repeat: no-repeat;
}
-->
</style>
</head>

<body>
<p>&nbsp;</p>

<html>
<head>
<script>

//variables que determinan la fecha y hora final de la cuenta atras
toYear=2013;
toMonth=09;
toDay=11;
toHour=08;
toMinute=00;
toSecond=00;

function countDown()
{
    new_year=0;
    new_month=0;
    new_day=0;
    new_hour=0;
    new_minute=0;
    new_second=0;
    actual_date=new Date();

    if(actual_date.getFullYear()>toYear)
    {
        //si ya nos hemos pasado del año, mostramos los valores a 0
        form.second.value=0;
        form.minute.value=0;
        form.hour.value=0;
        form.day.value=0;
        form.month.value=0;
        form.year.value=0;
    }else{
        new_second=new_second+toSecond-actual_date.getSeconds();
        if(new_second<0)
        {
            new_second=60+new_second;
            new_minute=-1;
        }
        form.second.value=new_second;

        new_minute=new_minute+toMinute-actual_date.getMinutes();
        if(new_minute<0)
        {
            new_minute=60+new_minute;
            new_hour=-1;
        }
        form.minute.value=new_minute;

        new_hour=new_hour+toHour-actual_date.getHours();
        if(new_hour<0)
        {
            new_hour=24+new_hour;
            new_day=-1;
        }
        form.hour.value=new_hour;

        new_day=new_day+toDay-actual_date.getDate();
        if(new_day<0)
        {
            x=actual_date.getMonth();
            if(x==0||x==2||x==4||x==6||x==7||x==9||x==11){new_day=31+new_day;}
            if(x==3||x==5||x==8||x==10){new_day=30+new_day;}
            if(x==1)
            {
                //comprobamos si es un año bisiesto...
                if(actual_date.getYear()/4-Math.floor(actual_date.getYear()/4)==0)
                {
                    actual_date=29+actual_date;
                }else{
                    actual_date=28+actual_date;
                }
            }
        }
        form.day.value=new_day;

        new_month=-1;
        new_month=new_month+toMonth-actual_date.getMonth();
        if(new_month<0)
        {
            new_month=11+new_month;
            new_year=-1;
        }
        form.month.value=new_month;

        new_year=new_year+toYear-actual_date.getFullYear();
        if(new_year<0)
        {
            form.year.value=0;
        }else{
            form.year.value=new_year;
            //vuelve a ejecutar la funcion dentro de 1000 milisegundos = 1 segundo
            setTimeout("countDown()",1000);
        }
    }
}
</script>

<style type="text/css">
.form_input2
{
    font-family: Verdana;
    font-size: 20;
    color: #ffffff;
    border-width: 0;
    background-color: #000000;
    text-align: center;
}

.form_input
{
    font-family: Verdana;
    font-size: 20px;
    color: #000000;
    border-width: 1;
    background-color: #ffffff; -->
    text-align: right;
}
</style>

</head>


<!--Al iniciar la pagina, ejecutamos la funcion-->
<body onload="countDown();">

<!--formulario deshabilitado donde se muestran los datos-->
<form name="form">
  <h4 align="center"><span class="Estilo1">Aviat entraràs a una nova dimensió.</span></h4>
  <h4 align="center"><br>
  </h4>
  <div align="center">
    <table width="50%" border="0">
      <tr>
        <td><div align="center">
          <input type="text" size="2" class="form_input" name="year" disabled />
        </div></td>
        <td><div align="center">
          <input type="text" size="2" class="form_input" name="month" disabled />
        </div></td>
        <td><div align="center">
          <input type="text" size="2" class="form_input" name="day" disabled />
        </div></td>
        <td><div align="center">
          <input type="text" size="2" class="form_input" name="hour" disabled />
        </div></td>
        <td><div align="center">
          <input type="text" size="2" class="form_input" name="minute" disabled />
        </div></td>
        <td><div align="center">
          <input type="text" size="2" class="form_input" name="second" disabled />
        </div></td>
      </tr>
      <tr>
        <td><div align="center"><strong>Anys</strong></div></td>
        <td><div align="center"><strong>Mesos</strong></div></td>
        <td><div align="center"><strong>Dies</strong></div></td>
        <td><div align="center"><strong>Hores</strong></div></td>
        <td><div align="center"><strong>Minuts</strong></div></td>
        <td><div align="center"><strong>Segons</strong></div></td>
      </tr>
      </table>
  </div>
  <h4 align="center"><br />
  </h4>
</form>

</body>
</html>


<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>