Steps to develop a JavaScript countdown timer that resumes counting even after refreshing the page

Question

Steps to develop a JavaScript countdown timer that resumes counting even after refreshing the page

I've been trying to figure it out with JavaScript and jQuery, but I'm stumped. I want the timer to not reset when the page is refreshed. It's like an auction countdown where it goes from 3,2 and if you refresh, it should pick up where it left off instead of starting over. For other products, it should start counting down from 3 again. Any ideas?

Edit: To clarify my question.

My problem is that I don't know how to save the remaining time when someone refreshes the page so that it continues counting down. For example, if someone refreshes at 21 seconds and they have 30 seconds to make their choice, after refreshing the site, the counter should continue from 21 seconds and not reset back to 30 seconds. No AJAX.

If possible, a hardcoded solution would be preferred. If not possible, then a cookie-based option.

javascript jquery-plugins timeout countdown

Answer 1

Answer №1

Upon loading the page, you have the option to assign a name to your window. Before naming it, make sure the window does not already have a name.

If the window is unnamed, give it a name and initiate counting at 0. Save the count value in a cookie each time it increments.

If the window already has a name (indicating a page reload), retrieve the count value from the cookie, increment it, and save it back to the cookie.

UPDATE: For example, trigger the initCount() function upon body load. Utilize decrementAndSave function to decrease the count value and store it in a cookie.

var count = 3; // 3 -> 2 -> 1

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function initCount() {
    if (window.name) {
        count = getCookie("count_" + window.name); // keep separate count cookies for each window    
    } else {
        window.name = "w_" + (new Date().getTime());
        count = 3;
        setCookie("count_" + window.name, count, null);
    }
}

function decrementAndSave() {
    count--;
    // separate cookie for each window or tab
    setCookie("count_" + window.name, count, null);
}

Answer 2

Upon loading the page, you have the option to assign a name to your window. Before naming it, make sure the window does not already have a name.

If the window is unnamed, give it a name and initiate counting at 0. Save the count value in a cookie each time it increments.

If the window already has a name (indicating a page reload), retrieve the count value from the cookie, increment it, and save it back to the cookie.

UPDATE: For example, trigger the initCount() function upon body load. Utilize decrementAndSave function to decrease the count value and store it in a cookie.

var count = 3; // 3 -> 2 -> 1

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function initCount() {
    if (window.name) {
        count = getCookie("count_" + window.name); // keep separate count cookies for each window    
    } else {
        window.name = "w_" + (new Date().getTime());
        count = 3;
        setCookie("count_" + window.name, count, null);
    }
}

function decrementAndSave() {
    count--;
    // separate cookie for each window or tab
    setCookie("count_" + window.name, count, null);
}

Answer 3

Answer №2

Although not flawless, I created a script for a 30-minute countdown with text change in the final seconds. The only glitch is that it displays 30:60 instead of 31:00 when reaching one minute. I haven't resolved this issue yet. While it may not be perfect for your needs, it could guide you in the right direction.

<script>
//add leading zeros
setInterval(function() {
function addZero(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}
var x = document.getElementById("timer");
var d = new Date();
var s = (d.getSeconds());
var m = (d.getMinutes());
var a = addZero(30 - m);
var b = addZero(60 - m);
var c = (60 - s);
var z = "<span style='color:red;font-size:50px;'>" + "Break" + "</span>";
var v = "<span style='color:black;font-size:24px;'>" + "Break" + "</span>";
//Decide how much should be subtracted from the time
if (m > 30) {
    y = b;
}
else if (m < 30) {
    y = a;
}
//elements for changing text
if (y < 2 && c < 15) {
    q = z;
}
else {
    q = v;
}

var t = y + (":" + addZero(c) + " Till Station " + (q));
x.innerHTML = t;
}, 250);
</script>


<div align="center" id="timer" style='color:black;font-size:24px;' ></div>

Answer 4

Although not flawless, I created a script for a 30-minute countdown with text change in the final seconds. The only glitch is that it displays 30:60 instead of 31:00 when reaching one minute. I haven't resolved this issue yet. While it may not be perfect for your needs, it could guide you in the right direction.

<script>
//add leading zeros
setInterval(function() {
function addZero(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}
var x = document.getElementById("timer");
var d = new Date();
var s = (d.getSeconds());
var m = (d.getMinutes());
var a = addZero(30 - m);
var b = addZero(60 - m);
var c = (60 - s);
var z = "<span style='color:red;font-size:50px;'>" + "Break" + "</span>";
var v = "<span style='color:black;font-size:24px;'>" + "Break" + "</span>";
//Decide how much should be subtracted from the time
if (m > 30) {
    y = b;
}
else if (m < 30) {
    y = a;
}
//elements for changing text
if (y < 2 && c < 15) {
    q = z;
}
else {
    q = v;
}

var t = y + (":" + addZero(c) + " Till Station " + (q));
x.innerHTML = t;
}, 250);
</script>


<div align="center" id="timer" style='color:black;font-size:24px;' ></div>

Answer 5

Answer №3

When using a countdown, it's important to have an end time set in order for it to be effective. Instead of just subtracting 1 every second, consider implementing a solution like the one below:

let endTime = new Date(2022,5,20,6,30,0); // Time set for June 20th, 2022 at 6:30 AM
let timer = setInterval(function() {
    let now = new Date();
    let timeLeft = Math.max(0, Math.floor((endTime.getTime() - now.getTime()) / 1000));

    let days, hours, minutes, seconds;
    seconds = timeLeft % 60;
    timeLeft = Math.floor(timeLeft / 60);
    minutes = timeLeft % 60;
    timeLeft = Math.floor(timeLeft / 60);
    hours = timeLeft % 24;
    timeLeft = Math.floor(timeLeft / 24);
    days = timeLeft;

    document.getElementById('counter').innerHTML = "Time remaining: " + days + " days, " + hours + " hours, " + minutes + " minutes, " + seconds + " seconds.";

    if (timeLeft == 0) clearInterval(timer);
}, 1000);

Answer 6

When using a countdown, it's important to have an end time set in order for it to be effective. Instead of just subtracting 1 every second, consider implementing a solution like the one below:

let endTime = new Date(2022,5,20,6,30,0); // Time set for June 20th, 2022 at 6:30 AM
let timer = setInterval(function() {
    let now = new Date();
    let timeLeft = Math.max(0, Math.floor((endTime.getTime() - now.getTime()) / 1000));

    let days, hours, minutes, seconds;
    seconds = timeLeft % 60;
    timeLeft = Math.floor(timeLeft / 60);
    minutes = timeLeft % 60;
    timeLeft = Math.floor(timeLeft / 60);
    hours = timeLeft % 24;
    timeLeft = Math.floor(timeLeft / 24);
    days = timeLeft;

    document.getElementById('counter').innerHTML = "Time remaining: " + days + " days, " + hours + " hours, " + minutes + " minutes, " + seconds + " seconds.";

    if (timeLeft == 0) clearInterval(timer);
}, 1000);

Answer 7

Answer №4

     var interval = 90000; //90 seconds

      function initializeTimer() {
        localStorage.endTime = +new Date() + interval;
      }

      if (!localStorage.endTime) {
        initializeTimer();
      }
      function convertMillisecondsToMinutesAndSeconds(millis) {
        var minutes = Math.floor(millis / 60000);
        var seconds = ((millis % 60000) / 1000).toFixed(0);
        return minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
       }
      setInterval(function () {
        var remainingTime = localStorage.endTime - new Date();
        if (remainingTime >= 0) {
          document.getElementById("tooltip").innerText =
            convertMillisecondsToMinutesAndSeconds(remainingTime);
        } else {
          initializeTimer();
        }
      }, 100);

Answer 8

     var interval = 90000; //90 seconds

      function initializeTimer() {
        localStorage.endTime = +new Date() + interval;
      }

      if (!localStorage.endTime) {
        initializeTimer();
      }
      function convertMillisecondsToMinutesAndSeconds(millis) {
        var minutes = Math.floor(millis / 60000);
        var seconds = ((millis % 60000) / 1000).toFixed(0);
        return minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
       }
      setInterval(function () {
        var remainingTime = localStorage.endTime - new Date();
        if (remainingTime >= 0) {
          document.getElementById("tooltip").innerText =
            convertMillisecondsToMinutesAndSeconds(remainingTime);
        } else {
          initializeTimer();
        }
      }, 100);

Steps to develop a JavaScript countdown timer that resumes counting even after refreshing the page

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Scrolling smoothly with React-Leaflet

Troubleshooting focus loss in React input fields within a Datatable component implemented in a

Iterating using a for loop within different functions

Managing and comparing category IDs in JavaScript to effectively store and render subcategories

Operating a React application in the background

Unlocking Bootstrap variables in Vue development (using Vanilla Bootstrap)

"Make your slides smooth and responsive with the unslick option in slick

Effortless navigation between components in React JS with smooth scrolling

Replacing the useEffect hook with @tanstack/react-query

Problems arise when using AngularJS' .run function after navigating to a different page

Adding labels to a JavaScript chart can be done by using the appropriate methods

Include an item in a Vuetify model's array of objects

Issue: Alert: Middleware for RTK-Query API designated as reducerPath "api" is missing from store configuration even though it has been included

Using JavaScript (without jQuery), modify the target of an anchor link based on its text content

How can Typescript be leveraged to enforce a generic constraint on an interface?

What is preventing me from binding ng-click to my element?

The module 'myapp' with the dependency 'chart.js' could not be loaded due to an uncaught error: [$injector:modulerr]

Bypass Security Check in Firefox

I'm puzzled about what could be behind this error message Error [ERR_HTTP_HEADERS_SENT], especially since I've only sent the response header once. How can I figure out the cause

Issue encountered with Angular template rendering in combination with Node.js