Неактивные кнопки в секундомере Js

Question

Неактивные кнопки в секундомере Js

Рейтинг: 0Ответов: 1Опубликовано: 19.06.2023

практикую Js, написал секундомер и хочу сделать так чтобы кнопки "Очистить" и "Стоп" были неактивными до нажатия "Cтарт", но не знаю как это правильно сделать.

"use strict";

// timer values
const hourElement = document.querySelector(".hour"),
  minuteElement = document.querySelector(".minute"),
  secondElement = document.querySelector(".second"),
  millisecondElement = document.querySelector(".millisecond");

// Buttons
const startBtn = document.querySelector(".start"),
  resetBtn = document.querySelector(".reset"),
  stopBtn = document.querySelector(".stop");

// additional variables
let hour = 0,
  minute = 0,
  second = 0,
  millisecond = 0,
  interval;

// listener
startBtn.addEventListener("click", () => {
  clearInterval(interval);
  interval = setInterval(startTimer, 10);

});



stopBtn.addEventListener('click', () => {
  clearInterval(interval);
})

resetBtn.addEventListener('click', () => {
  clearInterval(interval);
  hour = 0
  minute = 0
  second = 0
  millisecond = 0
  millisecondElement.innerText = "0" + millisecond;
  secondElement.innerText = "0" + second;
  minuteElement.innerText = "0" + minute;
  hourElement.innerText = "0" + hour;
})

// function start Timer
function startTimer() {
  millisecond++;
  if (millisecond < 9) {
    millisecondElement.innerText = "0" + millisecond;
  }
  if (millisecond > 9) {
    millisecondElement.innerText = millisecond;
  }
  if (millisecond > 99) {
    second++;
    secondElement.innerText = "0" + second;
    millisecond = 0;
    millisecondElement.innerText = "0" + millisecond;
  }

  // second
  if (second > 9) {
    secondElement.innerText = second;
  }
  if (second > 59) {
    minute++;
    minuteElement.innerText = "0" + minute;
    second = 0;
    secondElement.innerText = "0" + second;
  }

  // minute
  if (minute > 9) {
    minuteElement.innerText = minute;
  }
  if (minute > 59) {
    hour++;
    hourElement.innerText = "0" + hour;
    minute = 0
    minuteElement.innerText = "0" + minute;
  }

  // hour
  if (hour > 9) {
    hourElement.innerText = hour;
  }
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 5em;
  line-height: 1;
}

.container {
  width: 60%;
  padding: 30px;
  margin: 0 auto;
  margin-top: 150px;
  -webkit-box-shadow: 0px 0px 30px 4px rgba(34, 60, 80, 0.2);
  -moz-box-shadow: 0px 0px 30px 4px rgba(34, 60, 80, 0.2);
  box-shadow: 0px 0px 30px 4px rgba(34, 60, 80, 0.2);
}

.timer{
  display: flex;
  justify-content: center;
  align-items: center;
}

.timer__block{
  width: 90px;
}

.buttons{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.button{
  color: #fff;
  border: none;
  background-color: #3f51b5;
  text-transform: uppercase;
  padding: 0.7rem 1.6rem;
  cursor: pointer;
  margin: 0 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <div class="container">
    <div class="timer">
      <div class="timer__block">
        <span class="time hour">00</span>
      </div>
      <div class="colon">:</div>
      <div class="timer__block">
        <span class="time minute">00</span>
      </div>
      <div class="colon">:</div>
      <div class="timer__block">
        <span class="time second">00</span>
      </div>
      <div class="colon">.</div>
      <div class="timer__block">
        <span class="time millisecond">00</span>
      </div>
    </div>

    <div class="buttons">
      <button class="button reset">Очистить</button>
      <button class="button stop">Стоп</button>
      <button class="button start">Старт</button>
    </div>
  </div>

  <script src="js/main.js"></script>
</body>
</html>

css javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 0

Создаем переменную isStarted = false. Оборачиваем весь код в прослушивателях событий на кнопках Очистить и стоп в if который проверяет isStarted === true. А при нажатии на кнопку старт переменную isStarted делаем true, тем самым активируя другие кнопки. Если надо снова отключить кнопки делаем isStarted false.

let isStarted = false;
startBtn.addEventListener("click", () => {
  clearInterval(interval);
  interval = setInterval(startTimer, 10);

});



stopBtn.addEventListener('click', () => {
  if (isStarted) {
  clearInterval(interval);
  }
  // Сомнительная проверка...
})

resetBtn.addEventListener('click', () => {
  if (isStarted) {
  isStarted = false;
  clearInterval(interval);
  hour = 0
  minute = 0
  second = 0
  millisecond = 0
  millisecondElement.innerText = "0" + millisecond;
  secondElement.innerText = "0" + second;
  minuteElement.innerText = "0" + minute;
  hourElement.innerText = "0" + hour;
  }
})```

Неактивные кнопки в секундомере Js

Ответы