Cмена активного окна веб-браузера

Question

Необходимо решить следующую проблему: Дана определенная веб-страница. Необходимо отслеживать сколько раз пользователь покидал данную страницу (сколько раз она была неактивной) и сколько времени она была неактивна в течении каждого ухода со страницы. Попытался написать скрипт самостоятельно, подсчёт числа уходов со страницы ведётся корректно, но не правдоподобно отображается время отсутствия на веб-странице.

let number_of_try_search_info = 0;
let seconds = 0;
let info_about_mistakes = new Map();
window.addEventListener('blur', function () {
   number_of_try_search_info++;
   let start_date = new Date().getTime();
   window.addEventListener('focus', function () {
      let end_date = new Date().getTime();
      seconds =  Math.round((end_date - start_date)/1000);
   });
   info_about_mistakes.set(number_of_try_search_info,seconds);
   console.log("Обнаружено нарушение! Вы покинули страницу " + number_of_try_search_info + " раз. " +
               "Вы отсутствовали на странице в течении " + seconds + " секунд");
   seconds = 0;
   for (let info_about_mistake of info_about_mistakes) {
      console.log("Уход № " + info_about_mistake[0] + ". Время отсутствия: " + info_about_mistake[1] 
                  + " секунд.");
   }
});

Answer 1

Всё про100 вы предполагаете секунды когда там миллисекунды.

Метод getTime() возвращает числовое значение, соответствующее указанной дате по всемирному координированному времени.

Значение, возвращённое методом getTime(), является количеством миллисекунд, прошедших с 1 января 1970 года 00:00:00 по UTC.

Рекомендации: разделите результат на 1000 чтоб получить секунды Подробнее тут

Answer 2

Не надо фокус в блюре. Сделайте на одном уровне, и разбиритесь, что при каком событии надо писать. Например, "вы отсутствовали" надо же, наверно, по фокусу писать.

Answer 3

Документация visibilitychange.

P.S. Запустите код и смените активную вкладку.

const leaveStatsNode = document.getElementById('leave-stats');
let leavingTimeStart = 0;


document.addEventListener('visibilitychange', function () {
   if (document.visibilityState === 'visible') {
      leaveStatsNode.innerHTML += `<div class="return">Вы вернулись. Время отсутствия ${ (Date.now() - leavingTimeStart) / 1000 } с.</div>`;
   }
   
   if (document.visibilityState === 'hidden') {
      leaveStatsNode.innerHTML += `<div class="leave">Вы покинули страницу...</div>`;
      leavingTimeStart = Date.now();
   }
});

.leave {
  background-color: #e73f3e;
  color: #ffffff;
  padding: 10px;
}
.return {
  background-color: #37a8ec;
  color: #ffffff;
  padding: 10px;
}

<div>
  <p>Статистика посещения:</p>
  <div id="leave-stats">
  </div>
</div>

БЛОГ НА HUSL

Cмена активного окна веб-браузера

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