Foros del Web » Programando para Internet » Javascript »

Redireccionar con cuenta regresiva y con opcion de detener la redireccion

Estas en el tema de Redireccionar con cuenta regresiva y con opcion de detener la redireccion en el foro de Javascript en Foros del Web. TEngo este script Código PHP: < html >  < head >  < script type = "text/javascript" >  var  num = 10 ;  function  contador () {     ...
  #1 (permalink)  
Antiguo 24/05/2011, 19:02
 
Fecha de Ingreso: mayo-2011
Mensajes: 167
Antigüedad: 11 años, 6 meses
Puntos: 1
Redireccionar con cuenta regresiva y con opcion de detener la redireccion

TEngo este script

Código PHP:
<html
<
head
<
script type="text/javascript"
var 
num=10
function 
contador() { 
  
num--; 
  if(
num==0location='_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?
  #2 (permalink)  
Antiguo 25/05/2011, 07:44
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 12 años, 5 meses
Puntos: 310
Respuesta: Redireccionar con cuenta regresiva y con opcion de detener la redireccion

A ver:
Código Javascript:
Ver original
  1. var contador = function(tiempo, intervalo){
  2.  var enCurso = 0, intv = intervalo || 1000;
  3.  var veces = tiempo / intv, este = this, timer;
  4.  this.empezar = function(callback){
  5.   enCurso = 1;
  6.   timer = setTimeout(function(){
  7.    if(veces + 1 && enCurso){
  8.     callback(veces-- * intv);
  9.     setTimeout(function(){ este.empezar(callback); }, intv);
  10.    }else{
  11.     return enCurso = 0;
  12.    }
  13.   }, intv);
  14.  };
  15.  this.parar = function(){
  16.   if(enCurso){ enCurso = 0; }
  17.  };
  18. }
  19. var cuentaAtras = new contador(10000);
  20. document.body.onload = function(){ cuentaAtras.empezar(function(tiempo){
  21.  document.getElementById('cuenta').innerHTML = 'Quedan ' + tiempo / 1000 + ' segundos';
  22.  if(!tiempo){ location.href = 'otrapagina.php'; }
  23. }); }
  24. document.getElementById('boton-parar').onclick = cuentaAtras.parar;
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #3 (permalink)  
Antiguo 26/05/2011, 17:27
 
Fecha de Ingreso: mayo-2011
Mensajes: 167
Antigüedad: 11 años, 6 meses
Puntos: 1
Respuesta: Redireccionar con cuenta regresiva y con opcion de detener la redireccion

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(tiempointervalo){
 var 
enCurso 0intv intervalo || 1000;
 var 
veces tiempo intveste thistimer;
 
this.empezar = function(callback){
  
enCurso 1;
  
timer setTimeout(function(){
   if(
veces && 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!
  #4 (permalink)  
Antiguo 26/05/2011, 22:54
 
Fecha de Ingreso: mayo-2011
Mensajes: 167
Antigüedad: 11 años, 6 meses
Puntos: 1
Respuesta: Redireccionar con cuenta regresiva y con opcion de detener la redireccion

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> 
  #5 (permalink)  
Antiguo 27/05/2011, 07:49
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 12 años, 5 meses
Puntos: 310
Respuesta: Redireccionar con cuenta regresiva y con opcion de detener la redireccion

Quita el onload en el tag body.
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #6 (permalink)  
Antiguo 27/05/2011, 07:59
 
Fecha de Ingreso: mayo-2011
Mensajes: 167
Antigüedad: 11 años, 6 meses
Puntos: 1
Respuesta: Redireccionar con cuenta regresiva y con opcion de detener la redireccion

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){
  #7 (permalink)  
Antiguo 27/05/2011, 08:01
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 12 años, 5 meses
Puntos: 310
Respuesta: Redireccionar con cuenta regresiva y con opcion de detener la redireccion

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 (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #8 (permalink)  
Antiguo 27/05/2011, 08:07
 
Fecha de Ingreso: mayo-2011
Mensajes: 167
Antigüedad: 11 años, 6 meses
Puntos: 1
Respuesta: Redireccionar con cuenta regresiva y con opcion de detener la redireccion

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?
<p><span id="cuenta">10</span><a href="" id="botonparar">Parar</a></p>
  #9 (permalink)  
Antiguo 27/05/2011, 08:42
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 12 años, 5 meses
Puntos: 310
Respuesta: Redireccionar con cuenta regresiva y con opcion de detener la redireccion

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 (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #10 (permalink)  
Antiguo 27/05/2011, 08:44
 
Fecha de Ingreso: mayo-2011
Mensajes: 167
Antigüedad: 11 años, 6 meses
Puntos: 1
Respuesta: Redireccionar con cuenta regresiva y con opcion de detener la redireccion

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

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

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?

Última edición por elcapitolio; 27/05/2011 a las 08:48 Razón: LIsto ya pude
  #11 (permalink)  
Antiguo 27/05/2011, 17:06
 
Fecha de Ingreso: mayo-2011
Mensajes: 167
Antigüedad: 11 años, 6 meses
Puntos: 1
Respuesta: Redireccionar con cuenta regresiva y con opcion de detener la redireccion

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
  #12 (permalink)  
Antiguo 28/05/2011, 06:13
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 12 años, 5 meses
Puntos: 310
Respuesta: Redireccionar con cuenta regresiva y con opcion de detener la redireccion

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 (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #13 (permalink)  
Antiguo 29/05/2011, 00:45
 
Fecha de Ingreso: mayo-2011
Mensajes: 167
Antigüedad: 11 años, 6 meses
Puntos: 1
Respuesta: Redireccionar con cuenta regresiva y con opcion de detener la redireccion

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']; ?>'; }
}); }
  #14 (permalink)  
Antiguo 29/05/2011, 07:23
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 12 años, 5 meses
Puntos: 310
Respuesta: Redireccionar con cuenta regresiva y con opcion de detener la redireccion

Cambia el onclick:
Código Javascript:
Ver original
  1. document.getElementById('botonparar').onclick = function(){
  2.  cuentaAtras.parar();
  3.  document.body.innerHTML += "<a href='index2.php?lugar=<?php echo $_GET['lugar']; ?>'>Index 2</a>";
  4. };
Saludos.
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #15 (permalink)  
Antiguo 29/05/2011, 09:23
 
Fecha de Ingreso: mayo-2011
Mensajes: 167
Antigüedad: 11 años, 6 meses
Puntos: 1
Respuesta: Redireccionar con cuenta regresiva y con opcion de detener la redireccion

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
  #16 (permalink)  
Antiguo 29/05/2011, 11:09
 
Fecha de Ingreso: mayo-2011
Mensajes: 167
Antigüedad: 11 años, 6 meses
Puntos: 1
Respuesta: Redireccionar con cuenta regresiva y con opcion de detener la redireccion

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>
  #17 (permalink)  
Antiguo 02/06/2011, 18:21
 
Fecha de Ingreso: mayo-2011
Mensajes: 167
Antigüedad: 11 años, 6 meses
Puntos: 1
Respuesta: Redireccionar con cuenta regresiva y con opcion de detener la redireccion

Problema no me funciona en firefox :S
  #18 (permalink)  
Antiguo 03/06/2011, 08:06
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 12 años, 5 meses
Puntos: 310
Respuesta: Redireccionar con cuenta regresiva y con opcion de detener la redireccion

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 (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red

Etiquetas: detener, opcion, redireccionar, regresiva
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 23:16.