Показать обратный отсчет по местному времени пользователя - PullRequest
0 голосов
/ 12 марта 2020

Я хочу реализовать простой javascript обратный отсчет, который всегда отсчитывается до локального пользователя в следующую пятницу, 15:00. В настоящее время я использую следующий код, но я считаю, что он отображает только обратный отсчет до следующей пятницы, 15:00 UT C. Любая помощь будет принята с благодарностью !!

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();
}

1 Ответ

0 голосов
/ 13 марта 2020

Javascript даты по своей сути являются UT C, однако различные не-UT C get и set все работают с локальными датами и временем на основе хоста системные часы и настройки летнего времени.

Так что, если вы не используете методы UT C, все в OP по умолчанию является "локальным". Ниже приведена упрощенная c реализация вашего «времени до следующей пятницы в 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 , вычисляя время до следующей полной секунды каждый раз, так что оно близко соответствует тику системных часов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...