<html>
<head>
<style type="text/css">
#contador_regresivo {width:440px;border: 1px solid #C9C9C9;}
#calCuerpo {width:440px;}
#calFondoEnunciado {background-color:#6B8E23;color:#FFFFFF;font: bold 12px Arial;text-align:center;padding: 6px 0;}
#calCuerpo div{display: inline-block;width: 110px;}
#calCuerpo div.cont{background-color:#FFFF00;color:#000000;font: bold 12px Arial;text-align: center;}
#calCuerpo div.cont span{background-color:#6B8E23;color:#FFFFFF;font: bold 12px Arial;float: right;width: 77px;}
#calCuerpo div.contfin {background-color:#FFFF00;color:#000000;font: bold 12px Arial;text-align: center;width: 100%;}
</style>
<script type="text/javascript">
function Iniciar_crono(){
var dia = <?php echo date('j');?>, mes = <?php echo date('n')-1;?>, anio = <?php echo date('Y');?>, hora = <?php echo date('H');?>, minuto = <?php echo date('i')+1;?>;
var fechaFinal = new Date(anio,mes,dia,hora,minuto)
var serv_ahora = new Date();
serv_ahora.setFullYear(<?php echo date('Y');?>);
serv_ahora.setMonth(<?php echo date('n')-1;?>);
serv_ahora.setDate(<?php echo date('j');?>);
serv_ahora.setHours(<?php echo date('H');?>);
serv_ahora.setMinutes(<?php echo date('i');?>);
diferencia = fechaFinal.getTime() - serv_ahora.getTime();
document.getElementById('calFondoEnunciado').inner HTML = 'Tiempo que falta hasta el ' + dia + '/' + mes + '/' + anio + ' ' + hora + ':' + minuto;
crono(diferencia);
}
function crono(resta){
segundostotales = parseInt(resta /1000, 10);
minutostotales = parseInt(segundostotales/60, 10);
horastotales = parseInt(minutostotales/60, 10);
dias = parseInt(horastotales/24, 10);
horas = parseInt(horastotales % 24, 10);
minutos = parseInt(minutostotales % 60, 10);
segundos = parseInt(segundostotales % 60, 10);
if(dias < 10) {dias = '0' + dias;}
if(horas < 10) {horas = '0' + horas;}
if(minutos < 10) {minutos = '0' + minutos;}
if(segundos < 10) {segundos = '0' + segundos;}
diasTxt = '<div class="cont">' + dias + '<span>Días</span></div>';
horasTxt = '<div class="cont">' + horas + '<span>Horas</span></div>';
minutosTxt = '<div class="cont">' + minutos + '<span>Minutos</span></div>';
segundosTxt = '<div class="cont">' + segundos + '<span>Segundos</span></div>';
if (Math.abs(resta) <= 900) {
window['contadorCompleto'] = '<div class="contfin">Se ha cumplido el tiempo</div>';
clearTimeout(window['intervalo']);
}
else
{
window['contadorCompleto'] = diasTxt + horasTxt + minutosTxt + segundosTxt;
window['contador'] = parseInt(resta - 1000);
window['intervalo'] = setTimeout(function() {crono(window['contador'])}, 1000);
}
document.getElementById('calCuerpo').innerHTML = window['contadorCompleto'];
}
window.onload=function(){Iniciar_crono();};
</script>
</head>
<body>
<div id="contador_regresivo">
<div id="calFondoEnunciado"></div>
<div id="calCuerpo"></div>
</div>
</body>
</html>