Countdown Timer That Doesn't Reset

by 6 replies
8
Here's the countdown timer script I'm using on my OTO page. When somebody resets their browser the countdown timer also resets which makes my offer look less credible. How do I make it to where it doesn't reset? Any help would be appreciated. Thanks in advance!

HTML Code:
<script>function startTimer(duration, display) {
var start = Date.now(),
diff,
minutes,
seconds;
function timer() {
// get the number of seconds that have elapsed since // startTimer() was called
diff = duration - (((Date.now() - start) / 1000) | 0);
// does the same job as parseInt truncates the float
minutes = (diff / 60) | 0;
seconds = (diff % 60) | 0;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds; if (diff <= 0) {
// add one second so that the count down starts at the full duration
// example 05:00 not 04:59
start = Date.now() + 1000;
}
};
// we don't want to wait a full second before the timer starts
timer();
setInterval(timer, 1000);
}
window.onload = function () {
var thirtyMinutes = 60 * 30,
display = document.querySelector('#time');
startTimer(thirtyMinutes, display);
};</script>
#programming #countdown #reset #timer
  • Hi.

    You can try to use cookie ( JavaScript Cookies ) or localStorage ( HTML5 Web Storage ) to save the timer value.
    • [1] reply
    • Thanks! Where would I place that in the coding?
  • i tried placing the script on my website, in the place where i wanted the timer to show, but it doesn't display on my site in either chrome or firefox?
    • [1] reply
    • You need to add this in the area where you want the timer to display.

      HTML Code:
      <span id="time"></span>
  • IncomeWitness, here is the sample of the modified code for you:
    HTML Code:
    <script>
    function startTimer(duration, display) {
        var start = localStorage.getItem("start"),
                diff,
                minutes,
                seconds;
        if (start === null) {
            start = Date.now();
            localStorage.setItem("start", start);
        }
        function timer() {
            // get the number of seconds that have elapsed since // startTimer() was called
            diff = duration - (((Date.now() - start) / 1000) | 0);
            // does the same job as parseInt truncates the float
            minutes = (diff / 60) | 0;
            seconds = (diff % 60) | 0;
            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;
            display.textContent = minutes + ":" + seconds;
            if (diff <= 0) {
                // add one second so that the count down starts at the full duration
                // example 05:00 not 04:59
                start = Date.now() + 1000;
            }
        }
        ;
        // we don't want to wait a full second before the timer starts
        timer();
        setInterval(timer, 1000);
    }
    window.onload = function () {
        var thirtyMinutes = 60 * 30,
                display = document.querySelector('#time');
        startTimer(thirtyMinutes, display);
    };
</script>
    • [ 1 ] Thanks
    • [1] reply
    • Thank you so much! I asked for help on 4 different websites and you're the first person who was kind enough to assist me with this issue. It works great!
Join the discussion

Next Topics on Trending Feed

  • 8

    Countdown Timer That Doesn't Reset

    Here's the countdown timer script I'm using on my OTO page. When somebody resets their browser the countdown timer also resets which makes my offer look less credible. How do I make it to where it doesn't reset? Any help would be appreciated. Thanks in advance! HTML Code: <script>function startTimer(duration, display) { var start = Date.now(), diff, minutes, seconds; function timer() { // get the number of seconds that have elapsed since // startTimer() was called diff = duration - (((Date.now() - start) / 1000) | 0); // does the same job as parseInt truncates the float minutes = (diff / 60) | 0; seconds = (diff % 60) | 0; minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; display.textContent = minutes + ":" + seconds; if (diff <= 0) { // add one second so that the count down starts at the full duration // example 05:00 not 04:59 start = Date.now() + 1000; } }; // we don't want to wait a full second before the timer starts timer(); setInterval(timer, 1000); } window.onload = function () { var thirtyMinutes = 60 * 30, display = document.querySelector('#time'); startTimer(thirtyMinutes, display); };</script>