Contador JavaScript que no arranca

JavierGPHP · #1 (**permalink**) 25/01/2009, 15:46

Hola amigos.
Me presento en este primer mensaje en Forosdelweb.com. Me llamo Javier y soy un simple aficionado del mundillo de PHP. Ahora me gustraría utilizar en mis paginas un script que cuenta marcha atrás. Me he basado en el de http://www.forosdelweb.com/f13/contador-marcha-atras-cambio-pagina-623227/#post2572325, pero no se ejecuta bien, no empieza a contar hacia abajo. A ver si podeis mirarlo.

Código HTML:

<html>
<head>
<script type="text/javascript"> 
function faltan(id){
tiempo=document.getElementById(id).innerHTML;
if (tiempo>0){ 
	tiempo=tiempo-1;
	var horas = Math.floor(tiempo/3600);
	var minutos = Math.floor(tiempo/60)-60*horas;
	var segundos = tiempo%60;	
	var resultado = horas + " horas : " + minutos + " minutos : " + segundos + " segundos" ; 
	document.getElementById(id).innerHTML = resultado;	
	setTimeout("faltan('"+id+"')",1000); 
	}else{ 
	window.location.href = "http://www.forosdelweb.com";
	} 
} 
</script>
</head>
<body>
<div id="txt">800</div><script type="text/javascript">faltan("txt");</script>
</body>
</html>

Gracias!!!

KarlanKas · #2 (**permalink**) 26/01/2009, 01:41

Hola Javier, Bienvenido a los foros!

Tu problema se resuelve añadiendo un comprobador que descubre si se ha dado un valor a tiempo.

<html>
<head>
<script type="text/javascript">
tiempo=false;
function faltan(id){
if(!tiempo){
tiempo = document.getElementById(id).innerHTML;
}

if (tiempo>0){
tiempo=tiempo-1;
var horas = Math.floor(tiempo/3600);
var minutos = Math.floor(tiempo/60)-60*horas;
var segundos = tiempo%60;
var resultado = horas + " horas : " + minutos + " minutos : " + segundos + " segundos" ;
document.getElementById(id).innerHTML = resultado;
setTimeout("faltan('"+id+"')",1000);
}else{
window.location.href = "http://www.forosdelweb.com";
}
}
</script>
</head>
<body>
<div id="txt">800</div><script type="text/javascript">faltan("txt");</script>
</body>
</html>

Un saludo!

JavierGPHP · #3 (**permalink**) 26/01/2009, 09:39

Solo puedo decirte una cosa:

Muchas gracias, champion.

Me has salvado de seguir buscando. Ahora os presento el código un poquito mejorado, ya que no muestra las palabras horas, minutos, segundos... sino que es al típico estilo de reloj digital.
Ahora bien, también incluye mejoras, ya que si un minuto es menor de 10, o un segundo menor de 10,... ¡Se muestra un 0 delante!
En fin, estoy orgulloso de que exista gente tan amable en este foro como KarlanKas

Código:

<html>
<head>
<script type="text/javascript"> 
tiempo=false;
function faltan(id){
if(!tiempo){
tiempo = document.getElementById(id).innerHTML;
}
if (tiempo>0){ 
tiempo=tiempo-1;
var horas = Math.floor(tiempo/3600);
var minutos = Math.floor(tiempo/60)-60*horas;
var segundos = tiempo%60;
if(minutos<10){minutos = "0" + minutos;}
if(segundos<10){segundos = "0" + segundos;}
var resultado = horas + ":" + minutos + ":" + segundos ; 
document.getElementById(id).innerHTML = resultado;	
setTimeout("faltan('"+id+"')",1000); 
}else{ 
window.location.href = location.href;
} 
} 
</script>
</head>
<body>
<div id="txt">10</div><script type="text/javascript">faltan("txt");</script>
</body>
</html>

JavierGPHP · #4 (**permalink**) 26/01/2009, 11:07

Oh, oh!!! Creo que nos enfrentamos ante un código a medio hacer.

Código HTML:

<html>
<head>
<script type="text/javascript"> 
tiempo=false;
function faltan(id){
if(!tiempo){
tiempo = document.getElementById(id).innerHTML;
}
if (tiempo>0){ 
tiempo=tiempo-1;
var horas = Math.floor(tiempo/3600);
var minutos = Math.floor(tiempo/60)-60*horas;
var segundos = tiempo%60;
if(minutos<10){minutos = "0" + minutos;}
if(segundos<10){segundos = "0" + segundos;}
var resultado = horas + ":" + minutos + ":" + segundos ; 
document.getElementById(id).innerHTML = resultado;	
setTimeout("faltan('"+id+"')",1000); 
}else{ 
window.location.href = location.href;
} 
} 
</script>
</head>
<body>
<div id="txt1">10</div><script type="text/javascript">faltan("txt1");</script>
<div id="txt2">15</div><script type="text/javascript">faltan("txt2");</script>
</body>
</html>

Fijaros en las líneas

Código HTML:

<div id="txt1">10</div><script type="text/javascript">faltan("txt1");</script>
<div id="txt2">15</div><script type="text/javascript">faltan("txt2");</script>

Terminan generando la sigueinte cuenta atrás:

1er segundo:
9
8
2º segundo
7
6
3er segundo
5
4

Se saltan un segundo entre medias. ¿Cual es el problema?