Ежедневный обратный отсчет с использованием Javascript

#javascript #countdown

Вопрос:

Я хотел бы создать простой ежедневный обратный отсчет с помощью JavaScript. Обратный отсчет должен работать аналогично этому: https://www.w3schools.com/howto/howto_js_countdown.asp

 // Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2022 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days   "d "   hours   "h "
    minutes   "m "   seconds   "s ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000); 

Но вместо обратного отсчета до фиксированного значения обратного отсчета var я хотел бы, чтобы обратный отсчет начинался каждый день в 3 часа дня.

Может ли кто-нибудь предложить соответствующие поправки к приведенному выше коду для достижения желаемой функциональности или не стесняйтесь писать новый код.

Большое спасибо за любой вклад!

ПРАВКА: Просто чтобы ответить на ваши вопросы и продолжить — мне просто нужен обратный отсчет, который уведомит моих клиентов, что у них осталось только столько времени, чтобы сделать заказ сегодня, если они хотят доставку в тот же день. Другими словами, если вы хотите, чтобы ваши продукты были отправлены СЕГОДНЯ, у вас осталось 1 час:2 минуты:3 секунды. Когда таймер достигнет 0 (в 3 часа дня), я хочу, чтобы он снова запустился до отметки 24 часа и, очевидно, снова истечет в 3 часа дня на следующий день. Я бы хотел, чтобы он учитывал уникальный часовой пояс пользователя. Надеюсь, в этом есть смысл.

Комментарии:

1. что вы подразумеваете под перезапуском, не могли бы вы объяснить более подробно ?

2. итак , если вы начнете с exmaple через 30 дней, в 3 часа дня он должен перезапустить значение до 30 дней? Или просто обновляйте дату один раз в день

3. 1) Должен ли он отмечаться галочкой «вниз» или «вверх», или он должен зависеть от countDownDate ?

4. 2) О каком часовом поясе мы говорим; только о собственном часовом поясе пользователя?

5. добавлена дополнительная информация к исходному сообщению

Ответ №1:

Создайте дату, равную 3 часам дня сегодня. Если сегодня уже перевалило за 3 часа дня, добавьте 24 часа, чтобы завтра было 3 часа дня.

 const now = new Date();
const countDownHour = 15;
let countDownDate = new Date(
   now.getFullYear(),
   now.getMonth(),
   now.getDate(),
   countDownHour
);
if (now.getHours() >= countDownHour) {
    countDownDate = new Date(countDownDate.getTime()   24 * 60 * 60 * 1000);
}
 

Комментарии:

1. Что произойдет, если сейчас 4 часа дня?

2. В 4 часа дня он должен показать, что осталось 23 часа. Ой. :Д да нет.

3. Да, это происходит, когда вы публикуете, не слишком задумываясь. Исправлено.