Necesito un contador decendente, Ayuda pls

nublar · #1 (**permalink**) 11/10/2009, 10:19

Holas, bueno yo soy programador php, pero lo que necesito debo hacerlo en javascript y la verdad de javascript conozco poco y nada...

Necesito mostrar en la web un contador decendente.
Que comience en 30 decrementando su valor cada un minuto hasta llegar a cero.
Cuando llegue a cero recarge automaticamente la pagina.

Agradecere muchissimo una mano con esye pls.
Gracias.

Adler · #2 (**permalink**) 11/10/2009, 13:33

Hola

Prueba con este contador regresivo creado por Tunait y un poco editado por mi. Toma las fecha del lado del servidor (ASP) pero te resultará sumamente fácil editarlo

Código javascript:

Ver original<html>
<head>
<style type="text/css">
#calContador {width:300px;}
#calFondoEnunciado {background-color:#6B8E23;color:#FFFFFF;font-family:Arial;font-size:12px;border: 1px solid #C9C9C9;border-width: 1px 1px 0px 1px;text-align:center;}
#calCuerpo td{background-color:#6B8E23;color:#FFFFFF;font-family:Arial;font-size:11px;font-weight:bold;text-align:center;}
#calCuerpo td.cont{background-color:#FFFF00;color:#000000;}
</style>
 
<script type="text/javascript">
function crono(){
var dia = <&#37;=Day(Now)%>, mes = <%=Month(Now)-1%>, anio = <%=Year(Now)%>, hora = <%=Hour(Now)%>, minutos = <%=Minute(Now)+30%> 
var fechaFinal = new Date(anio,mes,dia,hora,minutos)
 
var serv_ahora =  new Date();
serv_ahora.getFullYear(<%=Year(Now)%>);
serv_ahora.getMonth(<%=Month(Now)-1%>); // Enero es el mes 0
serv_ahora.getDate(<%=Day(Now)%>);
serv_ahora.getHours(<%=Hour(Now)%>);
serv_ahora.getMinutes(<%=Minute(Now)%>);
diferencia = fechaFinal.getTime() - serv_ahora.getTime()
 
dias =diferencia/1000/60/60/24
diasTotales = parseInt(dias)
horasTotales = diferencia/1000/60/60 
horasReales = parseInt(horasTotales) - (parseInt(diasTotales)*24) 
minutosFaltan = horasTotales - parseInt(horasTotales)
minutosFaltan2 = minutosFaltan*1000*60*60
minutosFaltan2 = minutosFaltan2/1000/60
minutosFinales = parseInt(minutosFaltan2)
segundosFaltan = minutosFaltan2 - parseInt(minutosFaltan2)
segundosFaltan2 = segundosFaltan*1000*60
segundosFaltan2 = parseInt(segundosFaltan2/1000)
 
falta = "<div id='calContador'><div id='calFondoEnunciado'>Tiempo que Falta hasta el " + dia + "/" + mes + "/" + anio + " " + hora + ":" + minutos + "</div><div id='calCuerpo'><table style='table-layout:fixed;' bgcolor=' #C9C9C9' border='0px' cellspacing='1px' cellspadding='0px' width='300px'><tr>";
 
if(diasTotales < 10) {diasTotales = "0" + diasTotales;}
if(horasReales < 10) {horasReales = "0" + horasReales;}
if(minutosFinales < 10) {minutosFinales = "0" + minutosFinales;}
if(segundosFaltan2 < 10) {segundosFaltan2 = "0" + segundosFaltan2;}
 
diasTxt = "<td class='cont'>" + diasTotales + "</td><td>Días</td>";
horasTxt = "<td class='cont'>" + horasReales + "</td><td>Horas</td>";
minutosTxt = "<td class='cont'>" + minutosFinales + "</td><td>Minutos</td>";
segundosTxt = "<td class='cont'>" + segundosFaltan2 + "</td><td>Segundos</td></tr></table></div></div>";
 
if (Math.abs(diferencia) <= 900) {
contadorCompleto = falta + "<td class='cont'>Se ha cumplido el tiempo</td></tr></table></div></div>";
clearInterval(crono);
}
else
{
contadorCompleto = falta +  diasTxt + horasTxt + minutosTxt + segundosTxt
setInterval("crono(),1000")
}
document.getElementById('contador_regresivo').innerHTML = contadorCompleto;
}
window.onload=crono;
</script>
</head>
<body>
<div id="contador_regresivo" style="text-align:center"></div>
</body>
</html>

Suerte

nublar · #3 (**permalink**) 13/10/2009, 06:24

Holas buenas
Alguien me puede dar una mano pls, lo necesitoo

Simplemente tengo que poner un contador Javascripts que vaya de 30 a 0 y que decremente cada un minuto.

Ayudita pls

ceSharp · #4 (**permalink**) 13/10/2009, 08:16

Hola nublar,

a ver si te sirve esto...
----------------------
var x = 30;
setInterval(decrecer,60000);
function decrecer()
{
if(x > 0)
{
document.getElementById('cont').innerHTML = x;
}
else
{history.go(0);}

x -= 1;
}
-----------------
con que haya un div con id="cont" suficiente. Seguro que hay formas más elegantes de hacerlo, pero bueno, si quieres algo simple ahí lo tienes. Si en algún momento quieres detener el bucle setInterval deberás usar clearInterval (porque según te lo he puesto el bucle se repite hasta el infinito... y más alla...) ;)

salu2

nublar · #5 (**permalink**) 13/10/2009, 08:51

Pongo el siguiente codigo, pero el navegador no muestra nada...

ceSharp · #6 (**permalink**) 13/10/2009, 09:05

vale, jejejejeje que torpe soy!
Como el div empieza en blanco y hasta dentro de un minuto no varía, evidentemente, durante un minuto estará en blanco...

prueba así:
------------------------
<script type="text/javascript">
var x = 29;
setInterval(decrecer,60000);
function decrecer()
{
if(x > 0)
{
document.getElementById('cont').innerHTML = x;
}
else
{history.go(0);}
x -= 1;
}

</script>

<div id="cont" >30</div>
-----------------------

sorry! ;)

nublar · #7 (**permalink**) 13/10/2009, 09:27

Excelente!

Muchas Gracias!!!!!!

nublar · #8 (**permalink**) 13/10/2009, 09:34

Una ultima consulta, al acabarse el tiempo, se recarga la pagina con history.go(0);

Ahora bien como hago para pasarle una variable via get al recargar?

Como por ejemplo ?timeout=true

Por que lo que necesito es con php, detectar el evento.

Bueno gracias por la ayuda!