Добавлять значение каждый час

Question

Нужно создать таймер. Каждый час с 01:00, добавлять + 50 пользователей. К 00:00 количество должно быть 0. То-есть если зайти на сайт в 11:00 - значение будет 550. Не могу понять как сделать, хелп

const clients = document.querySelector('#clients')
const d = new Date()
const m = d.getMinutes()
const now = [d.getHours(), d.getMinutes()].map((x) => (x < 10 ? '0' + x : x)).join(':')
const delay = 60 * 60 * 1000

function addClients() {
  if (now == '00:00') clients.innerHTML = 0
  if (now > '00:00' && m == 0) {
    clients.innerHTML = 50
    setInterval(() => (clients.innerHTML = +clients.textContent + 50), delay)
  }
}
addClients()

<span id="clients"></span>

Answer 1

Можно просто взять нужную компоненту времени у new Date:

const seconds = document.querySelector('#seconds');
const minutes = document.querySelector('#minutes');
const hours = document.querySelector('#hours');

const setSeconds = () => seconds.textContent = (new Date()).getSeconds() * 50;
const setMinutes = () => minutes.textContent = (new Date()).getMinutes() * 50;
const setHours = () => hours.textContent = (new Date()).getHours() * 50;

setSeconds();
setMinutes();
setHours();

setInterval(setSeconds, 1000);
setInterval(setMinutes, 1000 * 60);
setInterval(setHours, 1000 * 60 * 60);

<p id="seconds">0</p>
<p id="minutes">0</p>
<p id="hours">0</p>

Answer 2

Вариант с синхронизацией времени на машине клиента. Т.к клиент может запустить скрипт в любую секунду, например в 34-ю секунду минуты, то мы должны подождать 26 секунд, прежде чем запускать setInterval, рассинхрон будет, но не большой.

const clients = document.querySelector('#clients');
const clock = document.querySelector('.clock');
const from = new Date().setHours(0, 0, 0, 0); // дата сегодняшнего дня начиная с 12 am

const delay = 60 * 60 * 1000;

function getCurrentClockTime() {
  const d = new Date();
  return [d.getHours(), d.getMinutes()].map((x) => (x < 10 ? '0' + x : x)).join(':');
}

/**
 * @param {number} multiplier - множитель кол-ва клиентов
 * Отрисовывает часы и кол-во клиентов
 */
function addClientsEveryHour(multiplier) {
  const hours = new Date().getHours(); // кол-во целых часов
  clients.textContent = hours * multiplier;
  clock.textContent = getCurrentClockTime(); // обновляем часы (лучше вынести в отдельную функцию т.к ниндзя-код)
}

/**
 * @param {number} initialDelay - начальная задержка
 * @param {number} period - период выполнения колбэка
 * @param {Function} cb - функция колбэка
 */
function timer(initialDelay, period, cb) { // функция timer схожая c одноименной функцией из библиотеки rxjs
  setTimeout(() => {
    cb();
    setInterval(() => cb(), period);
  }, initialDelay);
}

/**
 * Т.к клиент может запустить скрипт в любую секунду, например в 34-ю секунду минуты, то мы должны подождать 26 секунд, прежде чем запускать setInterval, рассинхрон будет, но не большой
 * Я выставил period в 1 минуту, просто чтобы часы обновлялись каждую минуту
 */
const now = new Date();
timer((60 - now.getSeconds())*1000 - now.getMilliseconds(), 60000, () => addClientsEveryHour(50));

addClientsEveryHour(50);

<h1 class="clock"></h1>
<div id="clients"></div>

БЛОГ НА HUSL

Добавлять значение каждый час

Ответы (2 шт):