Счетчик времени на сайте
Появилось желание установить на сайт счетчик, который показывает общее время, проведенное на сайте. Причем он возобновляется каждый раз, когда заходишь на сайт и продолжается с того же места, на котором сайт покинули. Используется localStorage
HTML
<div class="page">
<div class="container">
<h2>Столько времени вы провели на этом сайте: <span></span></h2>
<button class="reset">сбросить счётчик</button>
</div>
</div>CSS
span{
font-family: monospace;
display: inline-block;
width: 100px;
font-size: 38px;
}JavaScript
let span = document.querySelector('span');
let reset = document.querySelector('.reset');
let seconds;
if(!localStorage.getItem('secondsAtSite')){
seconds = 0;
}else{
seconds = +localStorage.getItem('secondsAtSite');
}
let out = '';
reset.onclick = function(){
localStorage.setItem('secondsAtSite', 0);
seconds = 0;
}
setInterval(()=>{
seconds++;
let min, sec, hou;
if(seconds > 59){
min = (seconds%3600/60<10?'0':'') + Math.floor(seconds%3600/60).toString();
hou = Math.floor(seconds/3600).toString();
sec = ((seconds % 60)<10?'0':'') + (seconds % 60).toString();
}else{
min = '00';
sec = ((seconds % 60)<10?'0':'') + (seconds % 60).toString();
hou = Math.floor(seconds/3600).toString();
}
out = `${hou}:${min}:${sec}`;
span.textContent = out;
localStorage.setItem('secondsAtSite', seconds);
}, 1000);