Как сгенерировать и показать увеличивающееся число на веб-странице, не переполняя страницу

Question

Число начнет увеличиваться после развертывания веб-страницы. Предположим, что число будет расти с 1 до 10000 и увеличиваться на 2 / любое вычисленное число каждые 1 минуту. Каждый раз, когда вы заходите на страницу, вы будете видеть текущий номер. Например, если вы посетите страницу через 500 минут после развертывания сайта, она покажет, скажем, 832. Повторите визит через 2 минуты, она покажет 836 (увеличивается на установленное нами число). И вы можете видеть, как он увеличивается без перезагрузки. Здесь сервер сгенерирует номер и продолжит отправлять обновления. Клиент увидит его вживую.

Answer 1

Для обновлений в реальном времени на клиентском сайте, где «источником истины» является сервер, я определенно рекомендую веб-сокеты. socket.io - прекрасная библиотека для этого. Таким образом, вам не придется перезагружать сайт или запрашивать что-либо снова и снова.

Что-то вроде:

// server
io.on('connection', (socket) => {
  console.log('a user connected');
});

setInterval(() => {
  // sending the current time-since-deploy to all clients
  io.sockets.emit('update-time', timeSinceDeploy);
}, 1000);

//client
socket.on('update-time', (elapsed) => {
  document.getElementById('minutes').innerHTML = elapsed;
});

Как настроить socket.io, вы напрямую получаете из их документации (https://socket.io/)

Answer 2

Напишите время развертывания в скрытом поле в вашем HTML. При запуске и затем с интервалом в 60 секунд вызовите функцию обновления, в которой вы указываете c время между развертыванием и текущим моментом. Результат можно отформатировать, потому что он выражен в миллисекундах и обновлен в вашем HTML.

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

Примечание: Это решение предполагает, что на сервере и на стороне клиента используется один и тот же часовой пояс, в противном случае вам нужно искать решение с UT C -время.

let deploy= document.getElementById('deploy').innerHTML;
let date = new Date(deploy);

updateDeploy();
setInterval(updateDeploy, 60000);

function updateDeploy() {
    let elapsed = parseInt((new Date() - date)/60000);
  document.getElementById('minutes').innerHTML = elapsed;
}

.hidden {
  display: none;
}

<div id='deploy' class='hidden'>2020-08-05T09:24:00</div>
Time elapsed<div id='minutes'></div>