如何实现每15分钟重置一次并精确到实际时间的倒数计时器?

时间:2019-05-06 08:53:35

标签: javascript countdowntimer

我正在尝试举办一个“及时”网络研讨会,该网络研讨会将在每个小时的'15,'30,'45和'60之后每小时显示一次。

我的问题是我似乎无法弄清楚如何编写一个倒数计时器,该倒数计时器可以倒计时到这些间隔中最接近的间隔并每15分钟重置一次。

我现在拥有的代码可以在准确的时间正确倒计时,但由于某种原因每小时都会倒数。我认为我的if陈述尚不完整。这是我的代码:

function update(){

  // Get current date and time
  var today = new Date();

  // Get number of days to Friday
  var dayNum = today.getMinutes();
  var daysToFri = 15 + (dayNum < 15? (-1 * dayNum) : dayNum - 30);
  
  // Get milliseconds to noon friday
  var fridayNoon = new Date(today);
  fridayNoon.setDate(fridayNoon.getDate() + daysToFri);
  fridayNoon.setHours(0,15,0,0);
  // Round up ms remaining so seconds remaining matches clock
  var ms = Math.ceil((fridayNoon - today)/1000)*1000;
  var d =  ms / 8.64e7 | 0;
  var h = (ms % 8.64e7) / 3.6e6 | 0;
  var m = (ms % 3.6e6)  / 6e4 | 0;
  var s = (ms % 6e4)    / 1e3 | 0;
  
  // Return remaining 
  return m + 'm ' + s + 's';
}

// Run update just after next full second
function runUpdate() {
  var el = document.getElementById('toFriday');
  el.innerHTML = update();
  setTimeout(runUpdate, 1020 - (Date.now()%1000));
}

 runUpdate();
<body>
  <div> <b><center>Online Training Starts In: <span style="color:crimson"; style="font-weight:bold"; id="toFriday"></span></center></b></div>
</body>

0 个答案:

没有答案