Javascript: простой секундомер
В этом пошаговом руководстве мы создадим простой секундомер на JavaScript, который будет иметь возможности старта, паузы и сброса времени.
00:00:00
Создайте файл HTML и добавьте следующий код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Секундомер</title>
</head>
<body>
<h1 id="timer">00:00:00</h1>
<button id="startBtn">Старт</button>
<button id="pauseBtn" disabled>Пауза</button>
<button id="resetBtn" disabled>Сброс</button>
<script>
// Ваш JavaScript код будет здесь
</script>
</body>
</html>
Теперь добавим JavaScript код для нашего секундомера:
let timer = document.getElementById('timer');
let startBtn = document.getElementById('startBtn');
let pauseBtn = document.getElementById('pauseBtn');
let resetBtn = document.getElementById('resetBtn');
let seconds = 0;
let minutes = 0;
let hours = 0;
let interval;
function updateTime() {
seconds++;
if (seconds === 60) {
minutes++;
seconds = 0;
}
if (minutes === 60) {
hours++;
minutes = 0;
}
timer.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
startBtn.addEventListener('click', () => {
interval = setInterval(updateTime, 1000);
startBtn.disabled = true;
pauseBtn.disabled = false;
resetBtn.disabled = false;
});
pauseBtn.addEventListener('click', () => {
clearInterval(interval);
startBtn.disabled = false;
pauseBtn.disabled = true;
});
resetBtn.addEventListener('click', () => {
clearInterval(interval);
seconds = 0;
minutes = 0;
hours = 0;
timer.textContent = '00:00:00';
startBtn.disabled = false;
pauseBtn.disabled = true;
resetBtn.disabled = true;
});
Сохраните файл и откройте его в вашем веб-браузере.
Теперь у вас должен быть рабочий секундомер с возможностями старта, паузы и сброса времени.
В этом примере мы использовали setInterval для обновления счетчика каждую секунду и clearInterval для остановки обновления при нажатии на кнопку «Пауза» или «Сброс».
Также, мы использовали метод padStart для добавления нулей перед значениями времени, если они состоят из одной цифры.