Redireccionar con cuenta regresiva y con opcion de detener la redireccion

elcapitolio · #1 (**permalink**) 24/05/2011, 19:02

TEngo este script

Código PHP:

  <html>  
<head>  
<script type="text/javascript">  
var num=10;  
function contador() {  
  num--;  
  if(num==0) location='_dos.html';  
  document.getElementById('seg').innerHTML=num;  
}  
</script>  
</head>  
<body onload="setInterval('contador()',1000)">  
<p>Redirección en <span id="seg">10</span> segundos.</p>  
</form>  
</body>  
</html>

pero es posible que si el usuario quiere detener la redireccion lo haga?...

Ejemplo: Esta pagina se redireccionara automaticamente en 8 segundos. Si deses permanecer aqui y no ser redireccionado haz clic aqui!

=) se puede?

_cronos2 · #2 (**permalink**) 25/05/2011, 07:44

A ver:

Código Javascript:

Ver originalvar contador = function(tiempo, intervalo){
 var enCurso = 0, intv = intervalo || 1000;
 var veces = tiempo / intv, este = this, timer;
 this.empezar = function(callback){
  enCurso = 1;
  timer = setTimeout(function(){
   if(veces + 1 && enCurso){
    callback(veces-- * intv);
    setTimeout(function(){ este.empezar(callback); }, intv);
   }else{
    return enCurso = 0;
   }
  }, intv);
 };
 this.parar = function(){
  if(enCurso){ enCurso = 0; }
 };
}
var cuentaAtras = new contador(10000);
document.body.onload = function(){ cuentaAtras.empezar(function(tiempo){
 document.getElementById('cuenta').innerHTML = 'Quedan ' + tiempo / 1000 + ' segundos';
 if(!tiempo){ location.href = 'otrapagina.php'; }
}); }
document.getElementById('boton-parar').onclick = cuentaAtras.parar;

Saludos (:

elcapitolio · #3 (**permalink**) 26/05/2011, 17:27

No lo pude implementar bien...

Código PHP:

  <!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=utf-8" /> 
<title>Documento sin título</title> 
</head> 
  
<body> 
  
<script type="text/javascript">  
var contador = function(tiempo, intervalo){ 
 var enCurso = 0, intv = intervalo || 1000; 
 var veces = tiempo / intv, este = this, timer; 
 this.empezar = function(callback){ 
  enCurso = 1; 
  timer = setTimeout(function(){ 
   if(veces + 1 && enCurso){ 
    callback(veces-- * intv); 
    setTimeout(function(){ este.empezar(callback); }, intv); 
   }else{ 
    return enCurso = 0; 
   } 
  }, intv); 
 }; 
 this.parar = function(){ 
  if(enCurso){ enCurso = 0; } 
 }; 
} 
var cuentaAtras = new contador(10000); 
document.body.onload = function(){ cuentaAtras.empezar(function(tiempo){ 
 document.getElementById('cuenta').innerHTML = 'Quedan ' + tiempo / 1000 + ' segundos'; 
 if(!tiempo){ location.href = 'otrapagina.php'; } 
}); } 
document.getElementById('boton-parar').onclick = cuentaAtras.parar; 
</script> 
<input name="" type="button"  id"boton-parar" /> 
<p> 
 
</body> 
</html>

Me pueden ayudar!

elcapitolio · #4 (**permalink**) 26/05/2011, 22:54

Ya cambie unas cosas y me sigue dando el problema.. tengo el codigo asi

Código HTML:

<html>  
<head>  
<script type="text/javascript">  
var contador = function(tiempo, intervalo){
 var enCurso = 0, intv = intervalo || 1000;
 var veces = tiempo / intv, este = this, timer;
 this.empezar = function(callback){
  enCurso = 1;
  timer = setTimeout(function(){
   if(veces + 1 && enCurso){
    callback(veces-- * intv);
    setTimeout(function(){ este.empezar(callback); }, intv);
   }else{
    return enCurso = 0;
   }
  }, intv);
 };
 this.parar = function(){
  if(enCurso){ enCurso = 0; }
 };
}
var cuentaAtras = new contador(10000);
document.body.onload = function(){ cuentaAtras.empezar(function(tiempo){
 document.getElementById('cuenta').innerHTML = 'Quedan ' + tiempo / 1000 + ' segundos';
 if(!tiempo){ location.href = 'otrapagina.php'; }
}); }
document.getElementById('botonparar').onclick = cuentaAtras.parar;
</script>  
</head>  
<body onload="setInterval('contador()',1000)">  
<p>Redirección en <span id="cuenta">10</span> segundos. <span id="botonparar">Parar</span></p>  
</form>  
</body>  
</html>

_cronos2 · #5 (**permalink**) 27/05/2011, 07:49

Quita el onload en el tag body.
Saludos (:

elcapitolio · #6 (**permalink**) 27/05/2011, 07:59

si ya intente quitandolo y aun me da error.... exactamente este..

Detalles de error de página web

Agente de usuario: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; InfoPath.2; .NET CLR 3.5.30729; .NET CLR 3.0.30729)
Fecha: Fri, 27 May 2011 13:59:14 UTC

Mensaje: 'document.body' es nulo o no es un objeto
Línea: 23
Carácter: 1
Código: 0
URI: http://elcapitolio.com.mx/testmenu.php?lugar=1ocotlan

aclaro la linea 23 es document.body.onload = function(){ cuentaAtras.empezar(function(tiempo){

_cronos2 · #7 (**permalink**) 27/05/2011, 08:01

Efectivamente, no me había dado cuenta.
Estás ejecutando el script en el head, y en ese momento el body todavía no se ha cargado en el DOM.
Solución: la más sencilla es mover todo el script antes de </body>.
Saludos (:

elcapitolio · #8 (**permalink**) 27/05/2011, 08:07

Haciendo eso... Cuenta regresiva solucionada

Me marca otro error

Mensaje: 'document.getElementById(...)' es nulo o no es un objeto
Línea: 30
Carácter: 1
Código: 0
URI: http://elcapitolio.com.mx/testmenu.php?lugar=1ocotlan

y tengo duda como tengo que hacer el vinculo de parar?
10<a href="" id="botonparar">Parar</a>

_cronos2 · #9 (**permalink**) 27/05/2011, 08:42

Lo que pasa es que tienes dos elementos con el mismo id #botonparar. Lo que debes hacer es tener un único elemento por id.
En cuanto a como hacer el botón para parar la cuenta atrás, no tienes que hacer nada, sólo tener un elemento (span, div, button...) #botonparar, o si lo quieres cambiar pues otro.
Saludos (:

elcapitolio · #10 (**permalink**) 27/05/2011, 08:44

Ya logre que no me marque el error... pero no puedo hacer el link de parar.. lo logre haciendo boton.. pero no kiero que sea boton prefiero que sea un simple link

<input name="" type="button" id="botonparar" value="Parar"><a href="#" id="botonparar">Parar</a>

corrijo... Ok ok listo ya pude lo hize con un span... solo para no kedarme con la duda silo haya kerido hacer con <a href= como debi haberlo hecho?

elcapitolio · #11 (**permalink**) 27/05/2011, 17:06

Nueva duda.. como puedo hacer ke al dar click en parar automaticamente aparezca un nuevo link que diga saltar pagina.. esto es por q despues de parar el tiempo si kieres cambiar de opinion ya no puedo

_cronos2 · #12 (**permalink**) 28/05/2011, 06:13

O bien creas el enlace vía DOM y se lo agregas a body con appendChild, o bien usas innerHTML, también para agregárselo a body.
Saludos (:

elcapitolio · #13 (**permalink**) 29/05/2011, 00:45

Tengo el siguiente codigo, pero no me funciona obviamente es por q no se mui bien de este lenguaje... me podrian ayudar...

Les recuerdo estoy tratando de que al dar click en botonparar aparezca un link en otra parte de la pagina

Código HTML:

var contador = function(tiempo, intervalo){
 var enCurso = 0, intv = intervalo || 1000;
 var veces = tiempo / intv, este = this, timer;
 this.empezar = function(callback){
  enCurso = 1;
  timer = setTimeout(function(){
   if(veces + 1 && enCurso){
    callback(veces-- * intv);
    setTimeout(function(){ este.empezar(callback); }, intv);
   }else{
    return enCurso = 0;
   }
  }, intv);
 };
 this.parar = function(){
  if(enCurso){ enCurso = 0; }
 };
}
var cuentaAtras = new contador(10000);
document.body.onload = function(){ cuentaAtras.empezar(function(tiempo){
 document.getElementById('cuenta').innerHTML = tiempo / 1000 ;
 if(!tiempo){ location.href = 'index2.php?lugar=<?php echo $_GET['lugar']; ?>'; }
 document.getElementById('botonparar').onclick = cuentaAtras.parar;
 if(!cuentaAtras.parar){ document.getElementById('vinculo').innerHTML = 'index2.php?lugar=<?php echo $_GET['lugar']; ?>'; }
}); }

_cronos2 · #14 (**permalink**) 29/05/2011, 07:23

Cambia el onclick:

Código Javascript:

Ver originaldocument.getElementById('botonparar').onclick = function(){
 cuentaAtras.parar();
 document.body.innerHTML += "<a href='index2.php?lugar=<?php echo $_GET['lugar']; ?>'>Index 2</a>";
};

Saludos.

elcapitolio · #15 (**permalink**) 29/05/2011, 09:23

Ok gracias si funciono, pero aveces no se detiene el contador si no hasta despues de varios clicks incluso aveces le doy varios clicks y no se detiene...

te paso el link de mi scrip
http://elcapitolio.com.mx/testmenu.php?lugar=1ocotlan

elcapitolio · #16 (**permalink**) 29/05/2011, 11:09

Listo ya lo solucione estaba repitiendo una funcion... les dejo el codigo ya terminado por si alguien le sirve.... gracias _cronos2 por la ayuda

Código:

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">
<!--
body,td,th {
	color: #FFF;
}
body {
	background-color: #000;
}
-->
</style></head>  
<body link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">  
<script type="text/javascript">  
var contador = function(tiempo, intervalo){
 var enCurso = 0, intv = intervalo || 1000;
 var veces = tiempo / intv, este = this, timer;
 this.empezar = function(callback){
  enCurso = 1;
  timer = setTimeout(function(){
   if(veces + 1 && enCurso){
    callback(veces-- * intv);
    setTimeout(function(){ este.empezar(callback); }, intv);
   }else{
    return enCurso = 0;
   }
  }, intv);
 };
 this.parar = function(){
  if(enCurso){ enCurso = 0; }
 };
}
var cuentaAtras = new contador(10000);
document.body.onload = function(){ cuentaAtras.empezar(function(tiempo){
 document.getElementById('cuenta').innerHTML = tiempo / 1000 ;
 if(!tiempo){ location.href = 'index2.php?lugar=<?php echo $_GET['lugar']; ?>'; }
 document.getElementById('botonparar').onclick = function(){
 cuentaAtras.parar();
 document.getElementById('vinculo').innerHTML += "<a href='index2.php?lugar=<?php echo $_GET['lugar']; ?>'>SALTAR ESTA PAGINA</a>";
};
}); }

</script>
<table width="530" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="496" valign="middle"><a href="#" id="botonparar"><img src="2011/parabtn.png"  width="496" height="49" border="0" ></a>    
      <br>
</td>
    <td width="34" align="center" valign="middle"><span style="font:Arial, Helvetica, sans-serif; font-size:32px; color:#FFF;" id="cuenta"></span></td>
  </tr>
</table>
<p align="center" style="font:Arial, Helvetica, sans-serif; font-size:32px; color:#FFF;" id="vinculo"></p>
</body>  
</html>

elcapitolio · #17 (**permalink**) 02/06/2011, 18:21

Problema no me funciona en firefox :S

_cronos2 · #18 (**permalink**) 03/06/2011, 08:06

Pues no entiendo por qué, pero el problema está en que no se ejecuta el evento onload del body :/
Prueba usando el onload sobre window en vez de document.body.
Saludos (: