Tell me how to make such a stopwatch so that when you hover the mouse, it pauses, and if you remove the mouse, it counts from the same moment it stopped, and when you press esc it is reset. I have already reread a lot but I haven’t found something like this = (I would be very grateful for the help !!!

Closed due to the fact that off-topic participants mymedia , 0xdb , Air , Stranger in the Q , LFC March 16 at 7:43 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • " Learning tasks are allowed as questions only on the condition that you tried to solve them yourself before asking a question . Please edit the question and indicate what caused you difficulties in solving the problem. For example, give the code you wrote, trying to solve the problem "- 0xdb, Stranger in the Q, LFC
If the question can be reformulated according to the rules set out in the certificate , edit it .

    1 answer 1

    Like this? Resetting left you a snack.

    This is the basis of any animation, how much time has passed

    let fromTime = new Date().getTime(); let mouseoverTime; let div = document.querySelector('div') div.addEventListener('mouseover', () => mouseoverTime = new Date().getTime()); div.addEventListener('mouseout', () => mouseoverTime = null); animate(); function animate() { let time = new Date().getTime(); if (mouseoverTime) { fromTime += time - mouseoverTime; mouseoverTime = time; } div.innerHTML = (time - fromTime)/1000; requestAnimationFrame(animate) } 
     div{ width:100px; height:20px; border: solid black; } 
     <div></div>

    PS: If you need the timer to tick in the background (on the inactive tab), then requestAnamayionFrame should be replaced with setTimeout

    • I compensate for the minus :), which for some reason was set for a good answer - Alexandr_TT