Cuenta regresiva entre dos horas...

tomuer01 · #1 (**permalink**) 02/04/2012, 05:36

Hola a todos....

Estoy desarrollando un sistemita donde el usuario ingresa y se registra la hora en la bd, el usuario tiene la opcion (obligacion) de comprar las horas que le permitiran estar en el sistema, por lo tanto, necesito una mostrar una cuenta regresiva entre estas dos horas...

Si alguien ha hecho algo parecido o conoce algun metodo favor que me ayuda...

Gracias.

IsaBelM · #2 (**permalink**) 02/04/2012, 05:47

la mayor parte de un contador regresivo se programa en javascript

Cita:

<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>

tomuer01 · #3 (**permalink**) 02/04/2012, 08:06

inserte el script pero no funciona...o falta otra cosa??

IsaBelM · #4 (**permalink**) 02/04/2012, 08:18

si quieres programar en javascript, empieza a usar una de las muchas consolas que existen

Cita:

chrome e ie ---> pulsa f12
firefox ---> firebug

yo te recomiendo la chrome o firebug
al vuelo se ve este "error" provocado por los hightlight del foro

Cita:

document.getElementById('calFondoEnunciado').inner HTML

seguro que habrá otros