<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>stopwatch</title>
</head>
<style>
*{
box-sizing: border-box;
}
#stopwatch {
background-color: #ededed;
border: 1px solid #000;
border-radius: 3px;
width: 150px;
}
#stopwatch p{
background-color: #fff;
border: 1px solid #000;
border-radius: 3px;
padding: 3px;
width: 80%;
margin-left: 10%;
text-align: center;
}
#stopwatch button {
width: 5em;
}
h6{
font-size: 20px;
}
</style>
<body>
<div id="stopwatch">
<p>00:00:000</p>
<button class = "startstopref">Старт</button>
<button class ="lap">Круг</button>
</div>
</body>
<script src="script.js">
const startstopref = document.querySelector('.startstopref');
let lap = document.querySelector('.lap');
let p = document.querySelector('p');
let h6 = document.querySelectorAll('h6');
let startTime;
let RAF;
let ms;
let s;
let m;
let laps = Date.now (0);
function reset() {
[].forEach.call(document.querySelectorAll('h6'),function(element){
element.parentNode.removeChild(element);
})
}
function add (x, y)
{let s = '00' + x; return s.substring(s.length - y)}
function clockRun ()
{
ms = Date.now () - startTime;
s = Math.floor (ms / 1000);
ms = ms % 1000;
m = Math.floor (s / 60);
s = s % 60;
p.innerHTML = [add (m, 2), add (s, 2), add (ms, 3)].join (':');
RAF = requestAnimationFrame (clockRun);
}
startstopref.addEventListener ('click' , funcButtons);
function funcButtons()
{
switch (this.innerHTML)
{
case 'Старт': startTime = Date.now (); this.innerHTML = 'Стоп'; clockRun ();
break;
case 'Стоп': this.innerHTML = 'Сброс'; cancelAnimationFrame (RAF);
break
case 'Сброс': this.innerHTML = 'Старт'; p.innerHTML = '00:00:000';
reset();
break;
}
}
lap.addEventListener('click', () => {
h6 = document.createElement('h6');
document.body.append(h6);
h6.innerHTML = [add (m, 2), add (s, 2), add (ms, 3)].join (':');
let now = Date.now() - laps;
console.log(now);
})
</script>
</html>
Запилил такой секундомер, не могу разобраться с одной штукой, надо что бы при нажатии на кнопку КРУГ сохранял не текущие показатели с табло, а разницу между нажатиями на кнопку(грубо говоря всемя каждого круга отдельно).