Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.05.2021, 05:55
Новичок на форуме
Отправить личное сообщение для Ramosok Посмотреть профиль Найти все сообщения от Ramosok
 
Регистрация: 13.05.2021
Сообщений: 7

Секундомер, время между кликами на кнопку.
<!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, 14.05.2021 в 06:00.
Ответить с цитированием
  #2 (permalink)  
Старый 14.05.2021, 08:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

секундомер с отметками кругов
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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как залочить кнопку отправки (после отправки данных) в форме на указанное время? ninjajnin Events/DOM/Window 2 22.10.2015 09:39
Position fixed, но динамический по оси ОХ tvixa Элементы интерфейса 4 09.09.2013 15:39