以用户当地时间显示倒计时

Question

我想实现一个简单的 JavaScript 倒计时，它总是倒计时到用户的本地下周五 15:00。我目前使用以下代码，但我相信它只显示到下周五 15:00 UTC 的倒计时。任何帮助将不胜感激！

var curday;
var secTime;
var ticker;

function getSeconds() {
  var nowDate = new Date();
  var dy = 5; //Sunday through Saturday, 0 to 6
  var countertime = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 15, 0, 0);

  var curtime = nowDate.getTime(); //current time
  var atime = countertime.getTime(); //countdown time
  var diff = parseInt((atime - curtime) / 1000);
  if (diff > 0) {
    curday = dy - nowDate.getDay()
  } else {
    curday = dy - nowDate.getDay() - 1
  } //after countdown time
  if (curday < 0) {
    curday += 7;
  } //already after countdown time, switch to next week
  if (diff <= 0) {
    diff += (86400 * 7)
  }
  startTimer(diff);
}

function startTimer(secs) {
  secTime = parseInt(secs);
  ticker = setInterval("tick()", 1000);
  tick(); //initial count display
}

function tick() {
  var secs = secTime;
  if (secs > 0) {
    secTime--;
  } else {
    clearInterval(ticker);
    getSeconds(); //start over
  }

  var days = Math.floor(secs / 86400);
  secs %= 86400;
  var hours = Math.floor(secs / 3600);
  secs %= 3600;
  var mins = Math.floor(secs / 60);
  secs %= 60;

  //update the time display
  document.getElementById("days").innerHTML = curday;
  document.getElementById("hours").innerHTML = ((hours < 10) ? "0" : "") + hours;
  document.getElementById("minutes").innerHTML = ((mins < 10) ? "0" : "") + mins;
  document.getElementById("seconds").innerHTML = ((secs < 10) ? "0" : "") + secs;
}

function starter() {
  getSeconds();
}

Answer 1

Javascript 日期本质上是 UTC，但是各种非 UTC get 和 set 方法都基于主机系统时钟和夏令时设置在本地日期和时间上工作.

因此，如果您不使用 UTC 方法，则默认情况下 OP 中的所有内容都是“本地”的。以下是您的“到下周五 15:00 的时间”的简单实现，全部作为本地值：

function timeUntil() {
  let now = new Date();
  // Create date for 15:00 on coming Friday 
  let friday = new Date(now);
  friday.setHours(15,0,0,0);
  let dayNum = friday.getDay();
  friday.setDate(friday.getDate() + 5 - (dayNum < 6? dayNum : 5 - dayNum));
  // If today is Friday and after 15:00, set to next Friday
  if (dayNum == 5 && friday < now) {
    friday.setDate(friday.getDate() + 7);
  }
  
  // Time remaining
  let diff = friday - now;
  let days = diff / 8.64e7 |0;
  let hrs  = (diff % 8.64e7) / 3.6e6 | 0; 
  let mins = (diff % 3.6e6) / 6e4 | 0; 
  let secs = (diff % 6e4) / 1e3 | 0; 

  // Display result
  document.getElementById('days').textContent = days;
  document.getElementById('hrs').textContent = hrs;
  document.getElementById('mins').textContent = mins;
  document.getElementById('secs').textContent = secs;
  document.getElementById('fullDate').textContent = friday.toLocaleString();
}

setInterval(timeUntil, 1000);

td {
  text-align: center;
}

<table>
  <tr><th>Days<th>Hrs<th>Mins<th>Secs
  <tr><td id="days"><td id="hrs"><td id="mins"><td id="secs">
  <tr><td id="fullDate" colspan="4">
</table>

请注意，setInterval 不是长时间运行计时器的好方法，因为它会漂移（它不会以精确 指定的时间间隔运行）。总体时间还可以，只是会时不时地跳过，相对于系统显示的时钟会在一秒钟内漂移。

最好使用顺序调用setTimeout，每次都计算直到下一整秒之后的时间，使其与系统时钟的滴答声非常接近。