javascript倒计时器每10分钟后重启一次

Question

Hi i got the countdown timer code from :

https://codepen.io/SitePoint/pen/MwNPVq ,

and have modified as :

function getTimeRemaining(endtime) {


var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);

  return {
    'total': t,

    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);

  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }

    if(t.minutes == 0 && t.seconds ==0) {
        console.log('in this func');
        deadline = new Date(deadline.getTime() + 10*60000);
    }

  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

deadline = new Date(Date.parse('Fri Mar 30 2018 17:03:00 GMT+0530'));
initializeClock('clockdiv', deadline);

what change, i have done is, i have checked if minutes and seconds both are 0, then the variable 'deadline' should be updated with new time. The countdown timer works fine but as it hits 0:0, it enters the function and everything stops.

Answer 1

You need to initialize clock again when it hits 0:0 ( updated pen )

if (t.minutes == 0 && t.seconds == 0) {
    console.log('in this func');
    deadline = new Date(deadline.getTime() + 10 * 60000);
    initializeClock('clockdiv', deadline); //added this line
}

Demo

 function getTimeRemaining(endtime) { var t = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.floor((t / 1000) % 60); var minutes = Math.floor((t / 1000 / 60) % 60); var hours = Math.floor((t / (1000 * 60 * 60)) % 24); var days = Math.floor(t / (1000 * 60 * 60 * 24)); return { 'total': t, 'days': days, 'hours': hours, 'minutes': minutes, 'seconds': seconds }; } function initializeClock(id, endtime) { var clock = document.getElementById(id); var daysSpan = clock.querySelector('.days'); var hoursSpan = clock.querySelector('.hours'); var minutesSpan = clock.querySelector('.minutes'); var secondsSpan = clock.querySelector('.seconds'); function updateClock() { var t = getTimeRemaining(endtime); daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ('0' + t.hours).slice(-2); minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); if (t.total <= 0) { clearInterval(timeinterval); } if (t.minutes == 0 && t.seconds == 0) { console.log('in this func'); deadline = new Date(deadline.getTime() + 10 * 60000); initializeClock('clockdiv', deadline); //added this line } } updateClock(); var timeinterval = setInterval(updateClock, 1000); } var deadline = new Date(Date.parse(new Date()) + 1 * 1 * 1 * 6 * 1000); initializeClock('clockdiv', deadline); 

 body { text-align: center; background: #00ECB9; font-family: sans-serif; font-weight: 100; } h1 { color: #396; font-weight: 100; font-size: 40px; margin: 40px 0px 20px; } #clockdiv { font-family: sans-serif; color: #fff; display: inline-block; font-weight: 100; text-align: center; font-size: 30px; } #clockdiv>div { padding: 10px; border-radius: 3px; background: #00BF96; display: inline-block; } #clockdiv div>span { padding: 15px; border-radius: 3px; background: #00816A; display: inline-block; } .smalltext { padding-top: 5px; font-size: 16px; } 

 <h1>Countdown Clock</h1> <div id="clockdiv"> <div> <span class="days"></span> <div class="smalltext">Days</div> </div> <div> <span class="hours"></span> <div class="smalltext">Hours</div> </div> <div> <span class="minutes"></span> <div class="smalltext">Minutes</div> </div> <div> <span class="seconds"></span> <div class="smalltext">Seconds</div> </div> </div>