Как изменить элемент в нужную дату и время?

Question

[Mishcake]

Привет! Подскажите, пожалуйста, как можно сделать так, чтобы элемент на сайте был изменен в конкретную дату и конкретное время?

Например, чтобы 29 марта в 23:59 МСК 29 990 скрылся, а вместо него показался 39 990. Думал про setTimeout, но что-то никак не могу его настроить так, чтобы он сработал в нужный мне момент (вне зависимости от того, открыта у меня страница или нет).

Comments

[Alice Smith]

при каком событии нужно менять элемент ?

[Mishcake]

Alice Smith, при событии наступления нужной даты + времени.

[Сергей Соколов]

а если у пользователя неправильно часы настроены на компе? ; )

[Сергей Соколов]

Можно ли с сервера передавать в теле страницы значение, когда должно произойти событие?

[Mishcake]

Сергей Соколов, нет, там конструктор сайтов :(

Answer 1

[Алексей]

Вам нужна функция, которая возвращает разницу между текущей датой и датой события. setInterval запускает эту функцию каждую секунду. Когда разница будет равна 0 или отрицательна - выполнить нужно действие.

Таким образом, если заход будет после события, то то условие сразу будет выполнено и покажется 39 990

Answer 2

[WapSter]

setInterval внутри условия с проверкой нужной даты с текущей. Запускаешь функцию каждую секунду ну или как захочешь

Comments

[Mishcake]

То есть логика в том, что если будет открыта вкладка - то в нужное время (плюс-минус погрешность) setInterval сменит элемент в реал-тайме, а если пользователь зайдёт после "дедлайна", то смена пройзойдёт в момент открытия страницы (и загрузки скрипта)?

[WapSter]

Mishcake, ну по идее да от условия зависит) Используй такое (текущая дата >= условная дата), тогда после "дедлайна" пользователь увидит изменения, погрешность будет не большая.

[Mishcake]

WapSter, но почему тогда такой вариант не работает в реалтайме? (после дедлайна при заходе на страницу всё ок):

<script>
		let now = new Date();
		let testScript = new Date(2020, 2, 27, 14, 37, 0, 0);

		let timer = setInterval(function () {
			if (now >= testScript) {
				alert("ура!");
			}
		}, 1000);
	</script>

[WapSter]

Mishcake, потому что твой скрипт проверят текущую дату только при заходе, смысл в том чтобы она проверялась каждую секунду.

[Valeron Sergeev]

Mishcake, так у тебя время создается до интервала, т.е. задали время текущее 14.45, и в проверке в переменной у тебя и через 5 минут такое же время

<script>
    let testScript = new Date(2020, 2, 27, 14, 37, 0, 0);

    let timer = setInterval(function () {
      let now = new Date();
      if (now >= testScript) {
        alert("ура!");
      }
    }, 1000);
  </script>

[Mishcake]

Valeron Sergeev, WapSter, семён семёныч!!! Точно) спасибо!!!

[Сергей Соколов]

никак не учтена временная зона – цена сменится в 23:59 не по Москве, а по локальному времени.

[WapSter]

Сергей Соколов, ну это уже вопрос к автору вопроса, не сложно дополнить.

[Mishcake]

WapSter, Сергей Соколов, спасибо за подсказку, пошёл копать, как задать точное московское время, а то у меня дата и время задаётся let time = new Date(2020, 3, 1, 0, 0, 0, 0);

[Mishcake]

Вроде пофиксил это let now = new Date(Date.now() + 14400000);

[Сергей Соколов]

Mishcake, нет, это просто «сейчас плюс 4 часа».
Скорректировать на временную зону может помочь метод Date.getTimezoneOffset()

[Mishcake]

Сергей Соколов, я не совсем понимаю, а как его использовать?..

[Mishcake]

Сергей Соколов, у меня конструктор сайтов, в который хочу впилить кастомный js-код, поэтому бэкенд/сервер/пхп там не подходит :(

[Mishcake]

Сергей Соколов, решил вопрос, задав дату дедлайна так:

let test = new Date("2020-03-28T09:41:00.000+03:00");

Answer 3

[historydev]

Храните этот setTimeout в localStorage или на сервере, точнее дату, проверяйте при каждом входе текущую с установленной и обрабатывайте.

Answer 4

[Karpion]

Если страница не открыта, то как можно что-то поменять?

Ваша задача распадается на две:

1. При загрузке страницы - надо поместить в элемент нужное значение в соответствии с текущим временем.
   
2. Затем надо вычислить, сколько времени осталось до следующего изменения - это не очень тривиально, но и не запредельно сложно; я уверен, что есть стандартные или библиотечные функции. И затем выставить setTimeout.
   

Идея проверять каждую секунду - отвратительная, ибо грузит процессор клиента/браузера.

Answer 5

[Сергей Соколов]

С сервера передавать Unix timestamp момента, когда должно произойти переключение. Например, на PHP что-то типа:

$timestamp = date('2020-03-29T23:59:00+03:00'); // +03:00 потому что по МСК
echo "<script>const theMoment = ${timestamp};</script>";

В странице ловить этот «абсолютный» момент, независимый от временной зоны браузера. Раз в секунду «смотреть на часы» – не пора ли:

const checkTime = (ts) => {
  if (Date.now() < ts) return setTimeout(() => checkTime(ts), 1000);
  // время пришло
  document.getElementById('price').innerText = '39 990';
}

checkTime(theMoment * 1000); // в JS timestamp считается в миллисекундах
// а из PHP приходит в целых секундах

Ну и где-то на странице есть элемент с ценой на замену:

<p>
  Специальная цена на наш утюг: <span id="price">29 990</span> 
  <br>
  действует до 30 марта!
</p>