¿Cómo puedo hacer una cuenta atrás jQuery

Question

Quiero una cuenta atrás de jQuery:

1. Se empieza a contar después de la página de descarga termina
2. Después de contar a 0 se redirige a una URL

¿Cómo puedo ¿Haz eso?

Answer 1

Pensé que rompería esto un poco y proporcionaría algo que incluye tanto la cuenta regresiva como la redirección. Después de todo, es posible que desee contar regresivamente y manipular el DOM en lugar de mañana. Como tal, se me ha ocurrido con el siguiente plugin de jQuery que puede utilizar, y estudiar:

// Our countdown plugin takes a callback, a duration, and an optional message 
$.fn.countdown = function (callback, duration, message) { 
    // If no message is provided, we use an empty string 
    message = message || ""; 
    // Get reference to container, and set initial content 
    var container = $(this[0]).html(duration + message); 
    // Get reference to the interval doing the countdown 
    var countdown = setInterval(function() { 
     // If seconds remain 
     if (--duration) { 
      // Update our container's message 
      container.html(duration + message); 
     // Otherwise 
     } else { 
      // Clear the countdown interval 
      clearInterval(countdown); 
      // And fire the callback passing our container as `this` 
      callback.call(container); 
     } 
    // Run interval every 1000ms (1 second) 
    }, 1000); 

}; 

// Use p.countdown as container, pass redirect, duration, and optional message 
$(".countdown").countdown(redirect, 5, "s remaining"); 

// Function to be called after 5 seconds 
function redirect() { 
    this.html("Done counting, redirecting."); 
    window.location = "http://msdn.microsoft.com"; 
} 

Answer 2

¿Seguro, desea utilizar Javascript para esto? Es posible que sólo tiene que ir con HTML plano:

<meta http-equiv="refresh" content="NUMBER_OF_SECONDS_TO_WAIT; URL=http://REDIRECT_URL/"> 

poner esto en la cabecera y el delantero va a trabajar incluso en los navegadores sin Javascript activado.

Answer 3

Tengo crear una secuencia de comandos de cuenta atrás utilizando JQUERY, CSS y HTML. Aquí está mi código fuente completo. Enlace demo también disponible.

CSS Parte:

<style type="text/css"> 
    body{ font-family: verdana; font-size:12px; } 
    a{text-decoration: none;color:blue;font-weight: bold;} 
    a:hover{color: gray;font-weight: bold;} 
    div#my-timer{width: 400px;background: lightblue; margin: 0 auto;text-align: center;padding:5px 0px 5px 0px;} 
</style> 

Jquery pieza:

<script type="text/javascript" src="js/jquery-1.4.2.js"></script> 
    <script type="text/javascript"> 
     var settimmer = 0; 
     $(function(){ 
       window.setInterval(function() { 
        var timeCounter = $("b[id=show-time]").html(); 
        var updateTime = eval(timeCounter)- eval(1); 
        $("b[id=show-time]").html(updateTime); 

        if(updateTime == 0){ 
         window.location = ("redirect.php"); 
        } 
       }, 1000); 

     }); 
    </script> 

HTML Parte:

<div id="my-timer"> 
     Page Will Redirect with in <b id="show-time">10</b> seconds   
</div> 

demostración Enlace: http://demos.coolajax.net/php/redirect

Espero que este código sea útil para usted.

Answer 4

En el ejemplo de código de Himel Khan publicado anteriormente, he cambiado

if(updateTime == 0)

a

if(updateTime <= 0)

por si acaso alguien golpea el botón de retroceso después de haber sido redirigida. De lo contrario, comenzará en números negativos y nunca volverá a redirigirse.

Es importante tener en cuenta que no debe tener el código vinculado en la página de destino con este cambio o se actualizará en bucle. Si realiza este cambio, solo incluya el script en la página con la cuenta regresiva.

Asumo que hay una mejor manera de lograr esta corrección así que tal vez alguien más podría añadir una solución mejor

Gracias por el código.

Answer 5

Aquí está mi ejemplo basado en el ejemplo de Jonathan Sampson. Aquí está el enlace jsfiddle.http://jsfiddle.net/njELV/1/

jQuery:

var countdown = { 
    startInterval : function() { 
     var count = 1800; // 30 minute timeout 
     var currentId = setInterval(function(){ 
      $('#currentSeconds').html(count); 
      if(count == 30) { // when there's thirty seconds... 
       $('#expireDiv').slideDown().click(function() { 
         clearInterval(countdown.intervalId); 
         $('#expireDiv').slideUp();      
         window.location.reload(); 
         //or whatever you'd like to do when someone clicks on the div (refresh your session etc). 
       }); 
      } 
      if (count == 0) { 
       window.location.href = '/logout.php'; 
      } 
      --count; 
     }, 1000); 
     countdown.intervalId = currentId; 
    } 
}; 
countdown.startInterval(); 

/* 
Then each time an ajax call is made to fetch a page 
*/ 
if(typeof countdown.oldIntervalId != 'undefined') { 
     countdown.oldIntervalId = countdown.intervalId; 
     clearInterval(countdown.oldIntervalId); 
     countdown.startInterval(); 
     $('#expireDiv').slideUp(); 
    } else { 
     countdown.oldIntervalId = 0; 
    } 

CSS:

#expireDiv { 
    width: 100%; 
    text-align: center; 
    background-color: #63AFD0; 
    padding: 10px; 
    margin: 0; 
    border: 1px solid #024A68; 
    color: #024A68; 
    font-weight: bold; 
    font-size: 125%; 
    box-shadow: -1px -1px 5px 1px #5E8C9E inset; 
    -moz-box-shadow: -1px -1px 5px 1px #5E8C9E inset; 
    -webkit-box-shadow: -1px -1px 5px 1px #5E8C9E inset; 
    display:none; 
    cursor: pointer; 
} 

HTML:

<div id="expireDiv"> 
    Your session is about to expire. You will be logged out in <span id="currentSeconds"></span> seconds. If you want to continue, please save your work and click <u>here</u> to refresh the page. 
</div> 

Answer 6

este enlace útil jQuery Countdown apoyo todo lenguaje

solo :)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.countdown.js"></script> 
<script type="text/javascript"> 
     $('#mySelector').countdown({since: new Date(2010, 12-1, 25)}); 
</script> 

Answer 7

Usted puede utilizar la función jQuery animate

// Enter num from and to 
$({countNum: 8000}).animate({countNum: 0}, { 
    duration: 8000, 
    easing:'linear', 
    step: function() { 
    // What todo on every count 
    console.log(Math.floor(this.countNum)); 
    }, 
    complete: function() { 
    console.log('finished'); 
    } 
}); 

http://jsbin.com/upazas/1/edit

Answer 8

se puede utilizar este

<div id="counter"></div> 

<script type="text/javascript" src="http://yourjavascript.com/88131111995/jquery.countdown.js"></script> 

    $(document).ready(function() { 
    $('#counter').countdown({ 
     until: 5, 
     compact: true, 
     onExpiry: function() { alert('bye!!'); } 
     }); 
    }); 

Answer 9

que tienen esta solución sencilla y sin jquery:

<script> 
    sec = 10; 
    counter = document.getElementById('counter'); 
    counter.innerText = sec; 
    i = setInterval(function(){ 
     --sec; 

     if (sec === 1){ 
      clearInterval(i); 
      window.location = document.getElementById('retry').href; 
     } 
     counter.innerText=sec; 
     },1000); 
    </script> 

En el ejemplo anterior, la URL de redireccionamiento se extrae de href atributo de un hipervínculo en el documento, que puede reemplazar con cualquier valor que desee.

Pedido esta DEMO