1

i'm creating a web app and i'm trying to create a countdown timer for a certain product that is on discount and i'm wondering if there is a way to not reset the timer after the page has been refreshed and when it reaches 0 , wait 24 hours and then reset itself automatically. Here is a picture of a timer down below:

enter image description here

Here is the code of a timer:

var count = 420;
    var counter = setInterval(timer, 1000);

    function timer() {
        count = count - 1;
        if (count == -1) {
            clearInterval(counter);
            return;
        }

        var seconds = count % 60;
        var minutes = Math.floor(count / 60);
        minutes %= 60;

        document.getElementById("timer").innerHTML = (minutes).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false}) + ":" + (seconds).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false}); // watch for spelling
        document.getElementById("timer2").innerHTML = (minutes).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false}) + ":" + (seconds).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false}); // watch for spelling

    }
ThuggyTM
  • 93
  • 1
  • 12
  • https://stackoverflow.com/questions/34747444/set-24-hours-remaining-countdown Does this answer your question? – Rani Giterman Feb 26 '22 at 08:18
  • It is unclear, from your question, whether each visitor should have their own timer, showing different countdowns, or whether there should only be one countdown and everyone sees the same. – KIKO Software Feb 26 '22 at 08:19
  • Each visitor should have their own timer, and it's supposed to reset back to 6:59 after 24 hours has passed AND it shouldn't reset back to 6:59 after the page has been refreshed – ThuggyTM Feb 26 '22 at 08:21
  • In that case you can store the start-time of the timer, in either a cookie or the session of the user (ah, or local storage). Why the start-time? Well, that's an absolute time, so every time you update the timer you can compute which time to show relative to this absolute time. So, the cookie, session or local storage takes care of the persistence, and the use of the absolute time makes page refreshes irrelevant. – KIKO Software Feb 26 '22 at 08:25

2 Answers2

0

It's not a great option, but when the user first lands on the page, create a timer with a new count down and store the counter value in the local storage, and update it every second in the storage as well. And the next time the user comes, you can check if you already have the counter in the storage, use that value of the counter to create the timer. Here's some documentation on using localStorage - https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

NavalRishi
  • 124
  • 9
0

You can use localStorage to persist a value across page loads. When talking about a timer, it makes sense to save the time at which the timer was started. That way when a visitor comes back your code can tell exactly how much time is left on it.

// Get the time stamp (in milliseconds) that the timer started 
var timerStart = window.localStorage.getItem('timerStart')
if (!timerStart){
    // If a timer was never started, start one
    timerStart = new Date().getTime()
    window.localStorage.setItem('timerStart', timerStart)
}

// Update the timer every 1/10th of a second
setInterval(timer, 100);

function timer() {
    // Use the start time to computer the number of
    // seconds left on the timer
    var count = 7 * 60 - Math.round((new Date().getTime() - timerStart) / 1000)
    if (count < 0) {
        clearInterval(timer);
        return;
    }

    var seconds = count % 60;
    var minutes = Math.floor(count / 60);
    minutes %= 60;

    document.getElementById("timer").innerHTML = (minutes).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false}) + ":" + (seconds).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false}); 
}
Stephen Ostermiller
  • 23,933
  • 14
  • 88
  • 109