как сделать чтоб на моем сайте при нажатии кнопки Start она меняла цвет до того момента пока не нажму на нее еще раз

Question

let milsec = 0;
let seconds = 0;
let minutes = 0;
let hours = 0;
let displayMilsec = 0;
let displaySeconds = 0;
let displayMinutes = 0;
let displayHours = 0;
let interval = null;
let status = "stopped";

function stopWatch() {
  milsec++;
  if (milsec / 10 === 1) {
    milsec = 0;
    seconds++;
    if (seconds / 60 === 1) {
      seconds = 0;
      minutes++;
      if (minutes / 60 === 1) {
        minutes = 0;
        hours++;
      }
    }
  }
  if (milsec < 10) {
    displayMilsec = milsec.toString();
  }
  if (seconds < 10) {
    displaySeconds = "0" + seconds.toString();
  } else {
    displaySeconds = seconds;
  }
  if (minutes < 10) {
    displayMinutes = "0" + minutes.toString();
  } else {
    displayMinutes = minutes;
  }
  if (hours < 10) {
    displayHours = "0" + hours.toString();
  } else {
    displayHours = hours;
  }
  document.getElementById("display").innerHTML = displayHours + ":" + displayMinutes + ":" + displaySeconds + "." + displayMilsec;
}

function startStop() {
  if (status === "stopped") {
    interval = window.setInterval(stopWatch, 100);
    document.getElementById("startStop").innerHTML = "Stop";
    status = "started";
  } else {
    window.clearInterval(interval);
    document.getElementById("startStop").innerHTML = "Start";
    status = "stopped";
  }
}

function reset() {
  window.clearInterval(interval);
  milsec = 0;
  seconds = 0;
  minutes = 0;
  hours = 0;
  document.getElementById("display").innerHTML = "00:00:00.0";
  document.getElementById("startStop").innerHTML = "Start";
  status = "stopped";
}

body {
  position: fixed;
  left: 48%;
  top: 46%;
  transform: translate(-50%, -50%);
  background: #000;
  color: #fff;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.a1 {
  background: #4beb23;
  cursor: pointer;
}

.a2 {
  background: #bd2d2d;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Stopwatch</title>
  <script type="text/javascript" src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div id="display">
      00:00:00.0
    </div>
    <div class="buttons">
      <button class="a1" id="startStop" onclick="startStop()">Start</button>
      <button class="a2" id="reset" onclick="reset()">Reset</button>
    </div>
  </div>
  <script>
    document.oncontextmenu = cmenu;

    function cmenu() {
      return false;
    }
  </script>
</body>

</html>

Answer 1

Можно сделать так..

let milsec = 0;
let seconds = 0;
let minutes = 0;
let hours = 0;
let displayMilsec = 0;
let displaySeconds = 0;
let displayMinutes = 0;
let displayHours = 0;
let interval = null;
let status = "stopped";
let start = document.getElementById("startStop");

function stopWatch() {
  milsec++;
  if (milsec / 10 === 1) {
    milsec = 0;
    seconds++;
    if (seconds / 60 === 1) {
      seconds = 0;
      minutes++;
      if (minutes / 60 === 1) {
        minutes = 0;
        hours++;
      }
    }
  }
  if (milsec < 10) {
    displayMilsec = milsec.toString();
  }
  if (seconds < 10) {
    displaySeconds = "0" + seconds.toString();
  } else {
    displaySeconds = seconds;
  }
  if (minutes < 10) {
    displayMinutes = "0" + minutes.toString();
  } else {
    displayMinutes = minutes;
  }
  if (hours < 10) {
    displayHours = "0" + hours.toString();
  } else {
    displayHours = hours;
  }
  document.getElementById("display").innerHTML = displayHours + ":" + displayMinutes + ":" + displaySeconds + "." + displayMilsec;
}

function startStop() {
  if (status === "stopped") {
    interval = window.setInterval(stopWatch, 100);
    start.innerHTML = "Stop";
    start.style.background = 'orange';
    status = "started";
  } else {
    start.style.background = '#4beb23';
    window.clearInterval(interval);
    document.getElementById("startStop").innerHTML = "Start";
    status = "stopped";
  }
}

function reset() {
  window.clearInterval(interval);
  milsec = 0;
  seconds = 0;
  minutes = 0;
  hours = 0;
  document.getElementById("display").innerHTML = "00:00:00.0";
  document.getElementById("startStop").innerHTML = "Start";
  status = "stopped";
  start.style.background = '#4beb23';

}

body {
  position: fixed;
  left: 48%;
  top: 46%;
  transform: translate(-50%, -50%);
  background: #000;
  color: #fff;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.a1 {
  background: #4beb23;
  cursor: pointer;
}

.a2 {
  background: #bd2d2d;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Stopwatch</title>
  <script type="text/javascript" src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div id="display">
      00:00:00.0
    </div>
    <div class="buttons">
      <button class="a1" id="startStop" onclick="startStop()">Start</button>
      <button class="a2" id="reset" onclick="reset()">Reset</button>
    </div>
  </div>
  <script>
    document.oncontextmenu = cmenu;

    function cmenu() {
      return false;
    }
  </script>
</body>

</html>

БЛОГ НА HUSL

как сделать чтоб на моем сайте при нажатии кнопки Start она меняла цвет до того момента пока не нажму на нее еще раз

Ответы (1 шт):