0

Thank you so much to all of you. Today i am trying to create a countdown and again reset this at 15min interval. I am using these code in javascript.

Javascript------

<script type="text/javascript">

$(document).ready(function(){
    setInterval(function(){
        countdown();
    }, 54000);
})

var mins = 15;
var secs = mins * 60;

function countdown() {
  setTimeout('Decrement()',1000);
}
function Decrement() {
   if (document.getElementById) {
       minutes = document.getElementById("minutes");
       seconds = document.getElementById("seconds");

        if (seconds < 59) {
            seconds.innerHTML = secs;
        } else {
           minutes.innerHTML = getminutes();
            seconds.innerHTML = getseconds();
        }
        secs--;
        if(secs > 0)
          {
           setTimeout('Decrement()',1000);
        }
        }
        }
        function getminutes() {
        // minutes is seconds divided by 60, rounded down
        mins = Math.floor(secs / 60);
        return mins;
        }
        function getseconds() {
        // take mins remaining (as seconds) away from total seconds 
        remaining
        return secs-Math.round(mins *60);
        }
 </script>

Call this countdown function on page load

 <body onload="countdown();">

    TIME LEFT: <label id="minutes"></label> : <label id="seconds"></label>
 </body>

As you can see that this countdown start on page load and i tried to restart the countdown on after 15min of time interval....

But i want to run this countdown on a 15min interval and keep continue on page refresh..

Please correct this code send me another reference .

chris85
  • 23,846
  • 7
  • 34
  • 51
Rohit sharma
  • 43
  • 1
  • 10
  • 1
    Use a cookie to store the time that they leave the page. There is no PHP here... or you could just store the start time as a cookie, then always subtract from that. I guess it depends if it is 15 minutes on your site you allow or 15 minutes from the start time. – chris85 Oct 27 '17 at 12:23
  • Thank you so much to revert me, Please can you give me more close hints because i don't have more knowledge regarding jquery cookies. – Rohit sharma Oct 27 '17 at 12:34
  • This thread should be able to help you https://stackoverflow.com/questions/14573223/set-cookie-and-get-cookie-with-javascript. – chris85 Oct 27 '17 at 12:35

2 Answers2

0

You can use local storage, such as :

localStorage.setItem('countDownValue', curtime); // To set the value
...
curtime = localStorage.getItem('countDownValue'); // To get the value

For More Info Visit - How to make countdown timer not reset when refresh the browser?

Mahendra Choudhary
  • 81
  • 5
0

You're making your life a little difficult with the way you are handling time.

Here's a suggestion for a simpler approach which also persists the remaining time in localStorage

  const cookieName = 'countDown';
  const savedSeconds = localStorage.getItem(cookieName);

  // If there are seconds saved in localStorage, start with these.
  // Otherwise, start with 900 seconds
  const fifteenMinutes = 900 // 15 minutes in seconds
  const startingSeconds = savedSeconds || fifteenMinutes;
  let remainingSeconds = startingSeconds;

  const minutesLabel = document.querySelector('#minutes');
  const secondsLabel = document.querySelector('#seconds');

  const countdown = () => {
    // If there are any remainingSeconds left, decrement by 1
    // If there are no remainingSeconds left, reset to 15 minutes
    remainingSeconds = remainingSeconds ? remainingSeconds-1 : fifteenMinutes;
    localStorage.setItem(cookieName, remainingSeconds);
    // Update the DOM
    minutesLabel.innerHTML = Math.floor(remainingSeconds/60);
    secondsLabel.innerHTML = remainingSeconds%60;
  }

  // Call countdown every second.
  setInterval(
    countdown,
    1000
  );
Marc Davies
  • 256
  • 1
  • 8
  • Thank you #MarcDavies Now coundown works in continuously but it's start again from starting on page refresh so it's also an issue because it should continue on page refresh not continue from starting.... – Rohit sharma Oct 27 '17 at 13:17
  • @Anushkasharma sorry, little bug in there. I didn't assign startingSeconds to remainingSeconds at the start. Fixed the code above, should work fine now :) – Marc Davies Oct 27 '17 at 14:26
  • Thank you so much @MarcDavies. Now it working as have required. But can i convert this for code for server side countdown in php also. Because that count down will not show the same result in diff. pcs right... – Rohit sharma Oct 27 '17 at 16:58
  • Dude I'm sorry but I haven't written PHP in years. I'm also not totally clear on what you're trying to achieve here? Hope I was useful anyway :) – Marc Davies Oct 27 '17 at 22:23