JQuery timer count down timer

Question

I want a simple JQuery count down timer, which should not restart when the browser is refreshed. I need days remaining, hours remaining, minutes remaining, seconds remaining.

Please help me to do I have did some code, but it is not resetting, also i did only seconds, please help me to do minutes and hours. Jsfillde is listed below

https://jsfiddle.net/3jf2g7q1/4/

[The simplest possible JavaScript countdown timer](http://stackoverflow.com/questions/20618355/the-simplest-possible-javascript-countdown-timer) — Yosvel Quintero, Oct 27 '16 at 12:32
http://stackoverflow.com/questions/22099714/how-to-make-countdown-timer-not-reset-when-refresh-the-browser — Townim Faisal, Oct 27 '16 at 12:33
you only could save the actual count down time inside of a cookie, but this is not very efficient...you should do the countdown on the server side and when calling your page, just take the actual count down time via ajax and start counting it down from the clientside (after a new reload, the script will take the actual time from the server) — messerbill, Oct 27 '16 at 12:33

score 0 · Answer 1 · answered Oct 27 '16 at 12:33

Try blow Fiddle,

https://jsfiddle.net/7fn039eu/

Code:

<p>
<span id="hour"></span> : <span id="mins"></span> : <span id="secs"></span>
</p>
<script>

function clock(){
var date=new Date();
console.log(date);
console.count("called");
var hours=date.getHours();
var min=date.getMinutes();
var sec=date.getSeconds();

document.getElementById('hour').innerText=hours;
document.getElementById('mins').innerText="0"+min;
document.getElementById('secs').innerText=sec;


}
clock();
setInterval(clock,1000);
</script>

this just displays the date and time - this is not what the TP was asking for — messerbill, Oct 27 '16 at 12:35

score 0 · Answer 2 · answered Oct 27 '16 at 12:34

0

Please see this:
http://www.w3schools.com/jsref/met_win_setinterval.asp

And combine it with:
http://www.w3schools.com/js/js_dates.asp

And if you must, a datepicker widget!
https://jqueryui.com/datepicker/

answered Oct 27 '16 at 12:34

alok

502
3
15

score 0 · Accepted Answer · edited May 23 '17 at 12:16

I have modified the answer from: this post to store the time in local storage. That means that if you refresh your browser the countdown will continue where it stopped.

HTML

<body>
  <div><span id="time"></span></div>
</body>

JavaScript var time = 5

function startTimer(duration, display) {
  var timer = duration;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    localStorage.minutes = minutes;
    localStorage.seconds = seconds;
    //      localStorage.removeItem('minutes')
      //localStorage.removeItem('seconds')
    if (--timer < 0) {
        localStorage.removeItem('minutes')
      localStorage.removeItem('seconds')
      timer = 5;
    }

  }, 1000);
}

window.onload = function() {
  if (Number(localStorage.seconds) < time) {
    var seconds = Number(localStorage.minutes) * 60
    console.log(seconds)
    time = Number(localStorage.seconds) + seconds
  }
  display = document.querySelector('#time');
  startTimer(time, display);
};

when refreshing the page, it is restarting – saifudeen ni Oct 27 '16 at 16:16 — saifudeen ni, Oct 27 '16 at 16:16
You can not try this in jsfiddle or similar. – Zorken17 Oct 27 '16 at 16:18 — Zorken17, Oct 27 '16 at 16:18

JQuery timer count down timer

3 Answers3