how can i make a jquery countdown

how can i make a jquery countdown  using -'jquery'

asked Sep 24, 2015 by sandeep bhadauria
0 votes

6 Answers

0 votes

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
            // And fire the callback passing our container as `this`
    // 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 = "";
answered Sep 24, 2015 by android_master
0 votes

I have create a countdown script using JQUERY, CSS and HTML. Here is my full source code. Demo link also available.

CSS Part:

Jquery Part:


HTML Part:

Page Will Redirect with in 10 seconds

Demo Link:

I hope this code will be a helpful one for you.

answered Sep 24, 2015 by nikhilapatil
0 votes

Are you sure, you want to use Javascript for this? You might just go with plain HTML:

Put this in the header and the forward will even work on browsers without Javascript enabled.

answered Sep 24, 2015 by sachin wagh
0 votes

Here's my example based off of Jonathan Sampson's example. Here's the jsfiddle link.


var countdown = {
    startInterval : function() {
        var count = 1800; // 30 minute timeout
        var currentId = setInterval(function(){
            if(count == 30) { // when there's thirty seconds...
                $('#expireDiv').slideDown().click(function() {
                        //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';
        }, 1000);
        countdown.intervalId = currentId;

Then each time an ajax call is made to fetch a page
if(typeof countdown.oldIntervalId != 'undefined') {
        countdown.oldIntervalId = countdown.intervalId;
    } else {
        countdown.oldIntervalId = 0;


#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;
    cursor: pointer;


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.
answered Sep 24, 2015 by ashish singh
0 votes

You can use the jQuery animate function

// Enter num from and to
$({countNum: 8000}).animate({countNum: 0}, {
  duration: 8000,
  step: function() {
    // What todo on every count
  complete: function() {

answered Sep 24, 2015 by sachin valanju
0 votes

In Himel Khan's code example posted above, I changed

if(updateTime == 0)


if(updateTime <= 0)

just in case somebody hits the back button after being redirected. Otherwise it will start into negative numbers and never re-redirect.

It is important to note that you should not have the code linked on the target page with this change or it will loop refresh. If you make this change, only include the script on the page with the countdown.

I assume there is a better way to accomplish this fix so maybe somebody else could add a better solution

Thank you for the code.

answered Sep 24, 2015 by jekbishnoi