Countdown Timer That Doesn't Reset

by IncomeWitness 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>
#programming #countdown #reset #timer
Avatar of Unregistered
  • 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.
    Signature
    2WDH.com: Professional cPanel Hosting since 2003
    Really helpful support. You're not a number to us! Programming, database and site development help.
    No overselling. SSD. Real 99.99%+ uptime. Free 2-week trial: no obligation/credit card required.
    {{ 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?
    Signature
    {{ 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>
    Signature
    2WDH.com: Professional cPanel Hosting since 2003
    Really helpful support. You're not a number to us! Programming, database and site development help.
    No overselling. SSD. Real 99.99%+ uptime. Free 2-week trial: no obligation/credit card required.
    {{ 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 }}
Avatar of Unregistered

Trending Topics