Секундомер, время между кликами на кнопку.
<!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> Запилил такой секундомер, не могу разобраться с одной штукой, надо что бы при нажатии на кнопку КРУГ сохранял не текущие показатели с табло, а разницу между нажатиями на кнопку(грубо говоря всемя каждого круга отдельно). |
секундомер с отметками кругов
Ramosok,
лучше код не кусками, а всё сразу ...
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>stopwatch</title>
<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>
</head>
<body>
<div id="stopwatch">
<p>00:00:000</p>
<button class="startstopref">Старт</button>
<button class="lap">Круг</button>
</div>
<script>
const startstopref = document.querySelector('.startstopref');
let lap = document.querySelector('.lap');
let p = document.querySelector('p');
let startTime;
let RAF;
let laps;
function reset() {
document.querySelectorAll('h6').forEach(element => element.remove())
}
function add(x, y) {
return x.toString().padStart(y, '0')
}
function formatAndShow(ms, element) {
ms = Math.trunc(ms);
let s = Math.floor(ms / 1000);
ms = ms % 1000;
let m = Math.floor(s / 60);
s = s % 60;
element.innerHTML = [add(m, 2), add(s, 2), add(ms, 3)].join(':');
}
function clockRun(nowTime) {
let ms = nowTime - startTime;
formatAndShow(ms, p)
RAF = requestAnimationFrame(clockRun);
}
startstopref.addEventListener('click', funcButtons);
function funcButtons() {
switch (this.innerHTML) {
case 'Старт':
startTime = laps = performance.now();
this.innerHTML = 'Стоп';
clockRun();
break;
case 'Стоп':
this.innerHTML = 'Сброс';
cancelAnimationFrame(RAF);
break;
case 'Сброс':
this.innerHTML = 'Старт';
p.innerHTML = '00:00:000';
reset();
break;
}
}
lap.addEventListener('click', () => {
let h6 = document.createElement('h6');
document.body.append(h6);
let ms = performance.now() - laps;
laps = performance.now();
formatAndShow(ms, h6)
})
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 04:23. |