Como posso fazer uma contagem regressiva de jQuery?

Eu quero uma contagem regressiva de jQuery:

  1. Começa a contar após o término do download da página
  2. Depois de contar para 0, ele redireciona para um URL

Como eu posso fazer isso?

Eu pensei que eu iria quebrar isso um pouco e fornecer algo que faz tanto contagem regressiva e redirecionamento. Afinal, você pode querer fazer a contagem regressiva e manipular o DOM amanhã. Como tal, eu criei o seguinte plugin jQuery que você pode usar e estudar:

// 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"; } 

Eu criei um script de contagem regressiva usando JQUERY, CSS e HTML. Aqui está o meu código fonte completo. Link de demonstração também disponível.

Parte CSS:

  

Jquery Part:

   

Parte HTML:

 
Page Will Redirect with in 10 seconds

Link de demonstração: http://demos.coolajax.net/php/redirect

Espero que este código seja útil para você.

Tem certeza, você quer usar JavaScript para isso? Você pode simplesmente ir com HTML simples:

  

Coloque isso no header e o encaminhamento funcionará em navegadores sem o Javascript ativado.

Aqui está o meu exemplo baseado no exemplo de Jonathan Sampson. Aqui está o link 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:

 
Your session is about to expire. You will be logged out in seconds. If you want to continue, please save your work and click here to refresh the page.

Você pode usar a function animate jQuery

 // 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

Eu tenho essa solução simples sem jquery :

  

No exemplo acima, o URL de redirecionamento é extraído do atributo href de um hiperlink no documento, que você pode replace por qualquer valor desejado.

Checkout this DEMO

No exemplo de código de Himel Khan postado acima, eu mudei

if(updateTime == 0)

para

if(updateTime <= 0)

apenas no caso de alguém acertar o botão de volta depois de ser redirecionado. Caso contrário, ele começará em números negativos e nunca será redirecionado novamente.

É importante observar que você não deve ter o código vinculado na página de destino com essa alteração ou atualizará em loop. Se você fizer essa alteração, inclua apenas o script na página com a contagem regressiva.

Eu suponho que há uma maneira melhor de realizar essa correção, então talvez alguém possa adicionar uma solução melhor

Obrigado pelo código.

este link útil Contagem regressiva jQuery suporta todos os idiomas

somente:)

    

você pode usar isso

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