Countdown Timer That Doesn't Reset

6 replies
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>
#countdown #reset #timer
  • Profile picture of the author 2WDHost
    Hi.

    You can try to use cookie ( JavaScript Cookies ) or localStorage ( HTML5 Web Storage ) to save the timer value.
    {{ DiscussionBoard.errors[10149650].message }}
  • Profile picture of the author newxxx
    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?
    {{ DiscussionBoard.errors[10152499].message }}
    • Profile picture of the author IncomeWitness
      You need to add this in the area where you want the timer to display.

      HTML Code:
      <span id="time"></span>
      {{ DiscussionBoard.errors[10159527].message }}
  • Profile picture of the author 2WDHost
    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>
    {{ DiscussionBoard.errors[10160207].message }}
    • Profile picture of the author IncomeWitness
      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!
      {{ DiscussionBoard.errors[10161718].message }}

Trending Topics