How can I make a jQuery countdown

Question

I want a jQuery countdown:

1. It starts counting after page download finishes
2. After counting to 0 it redirects to a url

How can I do that?

Answer 1

I thought I would break this up a bit and provide something that does both countdown, and redirection. After all, you may want to countdown and manipulate the DOM instead tomorrow. As such, I've come up with the following jQuery plugin that you can use, and study:

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