Autor Tema: [Mini tutorial] Cuenta atrás  (Leído 2030 veces)

Desconectado Warlox

  • Moderadores PHP
  • PHPero Master
  • ****
  • Mensajes: 1.278
  • Karma: 77
  • Sexo: Masculino
  • A veces hay que aprender a correr antes de caminar
    • Ver Perfil
    • Página personal
[Mini tutorial] Cuenta atrás
« en: 14 de Febrero de 2010, 20:52:54 pm »
¡Hola!

Como estaba aburrido y sin hacer nada, se me ocurrió que quizás en algún momento necesitarían, o querrían un código que hiciera una cuenta regresiva en JavaScript.

Supongamos que queremos que al usuario se le cierre la sesión en 10 segundos, ponemos el siguiente código:

Código: [Seleccionar]
<script>
var tiempo = 10;
function contar(){
if(tiempo <= 0){ // Si el tiempo es menor o igual a 0..
document.getElementById("contador").innerHTML = "Redireccionando..."; // Ponemos el texto de redireccionamiento
document.location = "/salir.php"; // Redireccinamos a salir
}else{ // Si el tiempo es mayor a 0
tiempo--; // Le restamos segundos
document.getElementById("contador").innerHTML = "Su sesión se cerrará en " + tiempo + " segundos."; // Le mostramos los segundos restantes al usuario
}
}

setInterval("contar()",1000); // Ejecutamos la función contar una vez por segundo
</script>

<span id="contador">Su sesión se cerrará en 10 segundos</span>

Y eso es todo, ojalá que les sirva.
Saludos.
- Moderador de PHP


Comunidad PHPeros

[Mini tutorial] Cuenta atrás
« en: 14 de Febrero de 2010, 20:52:54 pm »

Desconectado chihue

  • PHPero Master
  • ******
  • Mensajes: 1.118
  • Karma: 43
  • Sexo: Masculino
  • 8 dias
    • Ver Perfil
    • Minichat con todo incluido
Re:[Mini tutorial] Cuenta atrás
« Respuesta #1 en: 14 de Febrero de 2010, 20:58:27 pm »

Desconectado тockηick

  • PHPero Avanzado
  • ****
  • Mensajes: 374
  • Karma: 11
    • Ver Perfil
Re:[Mini tutorial] Cuenta atrás
« Respuesta #2 en: 14 de Febrero de 2010, 22:08:58 pm »
Y si, a todos le sirvio, Asi que te doy tu karma (:


Sldos!

Desconectado ferri

  • PHPero Experto
  • *****
  • Mensajes: 642
  • Karma: 40
  • Sexo: Masculino
    • Ver Perfil
Re:[Mini tutorial] Cuenta atrás
« Respuesta #3 en: 14 de Febrero de 2010, 22:18:04 pm »
Buenísimo aporte!

Un saludo

Desconectado Estritorial

  • PHPer@ Fijo
  • ***
  • Mensajes: 218
  • Karma: 6
  • Sexo: Masculino
  • PHPero Video Tutero
    • Ver Perfil
    • Habbo Planet
Re:[Mini tutorial] Cuenta atrás
« Respuesta #4 en: 15 de Febrero de 2010, 17:52:25 pm »
Buen aporte, se podria usar para un concurso por ejemplo, decir el orden de estos numeros:
Cuenta atras...

Aun que tambien habria que cojer script para que no se pudiera utilizar el TECLADO para el IMP PANT, y que solo se pudiera ver una vez al dia. :)


Si el PHP fuera solo una imaginación, ¿que seria de los PHPeros?

Desconectado x.mara.x

  • PHPero Master
  • ******
  • Mensajes: 1.364
  • Karma: 57
  • Sexo: Femenino
    • Ver Perfil
Re:[Mini tutorial] Cuenta atrás
« Respuesta #5 en: 16 de Febrero de 2010, 14:25:56 pm »
muy bueno Kevin! +karma!

Desconectado Guero

  • PHPero Avanzado
  • ****
  • Mensajes: 439
  • Karma: 13
  • Sexo: Masculino
  • PHPeros, tu web PHP
    • Ver Perfil
    • De aquí, puedes encontrar Roma
Tutorial - Cuenta atras
« Respuesta #6 en: 21 de Febrero de 2010, 14:53:55 pm »
Muy bueno Kevin, ojalá te pudiera dar un Karma, me servira para hacer un concurso, o una fiesta con una cuenta atrás. :)

Desconectado Warlox

  • Moderadores PHP
  • PHPero Master
  • ****
  • Mensajes: 1.278
  • Karma: 77
  • Sexo: Masculino
  • A veces hay que aprender a correr antes de caminar
    • Ver Perfil
    • Página personal
Re:[Mini tutorial] Cuenta atrás
« Respuesta #7 en: 22 de Febrero de 2010, 00:31:51 am »
¡Gracias Mara y Guero!

La verdad es que no es muy difícil de hacer, y es fácil de implementar xD. Un día de estos vi este código en la web de un PHPero y me he sentido como "acongojado" o no sé xD.

Saludos.,
- Moderador de PHP


Desconectado GuayAngel12

  • PHPero Experto
  • *****
  • Mensajes: 894
  • Karma: 17
  • Sexo: Masculino
  • Programador PHP, CSS, HTML...
    • Ver Perfil
    • GreeBool
Re:[Mini tutorial] Cuenta atrás
« Respuesta #8 en: 23 de Mayo de 2010, 13:26:18 pm »
Pues ami no me funciona. Tengo este codigo... y no me funciona se me queda la pagina en blanco:

Código: [Seleccionar]
<html>
<head>
<script>
var tiempo = 10;
function contar(){
   if(tiempo <= 0){ // Si el tiempo es menor o igual a 0..
      document.getElementById("contador").innerHTML = "Redireccionando..."; // Ponemos el texto de redireccionamiento
      document.location = "/salir.php"; // Redireccinamos a salir
   }else{ // Si el tiempo es mayor a 0
      tiempo--; // Le restamos segundos
      document.getElementById("contador").innerHTML = "Su sesión se cerrará en " + tiempo + " segundos."; // Le mostramos los segundos restantes al usuario
   }
}

setInterval("contar()",1000); // Ejecutamos la función contar una vez por segundo
</script>
</head>
<body>
<div id="contar"></div>
</body>
</html>
« Última modificación: 23 de Mayo de 2010, 13:30:13 pm por GuayAngel12 »

Desconectado Rodrinete

  • PHPer@ Fijo
  • ***
  • Mensajes: 222
  • Karma: 6
    • Ver Perfil
Re:[Mini tutorial] Cuenta atrás
« Respuesta #9 en: 23 de Mayo de 2010, 13:57:09 pm »
cambia

<div id="contar"></div>

por

<div id="contador"></div>


Saludos