javascript - 单击或按下空格键时启动/停止 Cube Timer

Question

我正在开发一个立方体计时器，您可以在其中按空格键/单击开始，然后按空格键/单击停止。我制作了一个可以停止/启动计时器的工作按钮，但按钮非常不切实际。

这是我到目前为止的代码：

//Define vars to hold time values
let seconds = 0;
let minutes = 0;
let hours = 0;

//Define vars to hold "display" value
let displaySeconds = 0;
let displayMinutes = 0;
let displayHours = 0;

//Define var to hold setInterval() function
let interval = null;

//Define var to hold stopwatch status
let status = "stopped";

//Stopwatch function (logic to determine when to increment next value, etc.)
function stopWatch() {

  seconds++;

  //Logic to determine when to increment next value
  if (seconds / 60 === 1) {
    seconds = 0;
    minutes++;

    if (minutes / 60 === 1) {
      minutes = 0;
      hours++;
    }

  }

  //If seconds/minutes/hours are only one digit, add a leading 0 to the value
  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;
  }

  //Display updated time values to user
  document.getElementById("display").innerHTML = displayHours + ":" + displayMinutes + ":" + displaySeconds;

}



function startStop() {

  if (status === "stopped") {

    //Start the stopwatch (by calling the setInterval() function)
    interval = window.setInterval(stopWatch, 1000);
    document.getElementById("startStop").innerHTML = "Stop";
    status = "started";

  } else {

    window.clearInterval(interval);
    document.getElementById("startStop").innerHTML = "Start";
    status = "stopped";

  }

}

#time {
  text-align: center;
  font-size: 80px;
  font-family: Roboto Mono;
}

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap" rel="stylesheet">

<div id="time">
  <div id="display">
    00.00
  </div>

  <div class="buttons">
    <button id="startStop" onclick="startStop()">Start</button>
  </div>
</div>

我尝试做一个事件监听器，但我尝试的代码不起作用，

document.getElementById("time").addEventListener("click", time());

function time() {
    if(status === "stopped"){

        //Start the stopwatch (by calling the setInterval() function)
        interval = window.setInterval(stopWatch, 1000);
        document.getElementById("startStop").innerHTML = "Stop";
        status = "started";

    }
    else{

        window.clearInterval(interval);
        document.getElementById("startStop").innerHTML = "Start";
        status = "stopped";

    }
}

标签： javascripthtml

Answer 1

主要部分在 JS 块的末尾：

document.getElementById("time").addEventListener('click', function() { startStop(); });
document.body.onkeyup = function(e){ if(e.keyCode == 32){ startStop(); }};

//Define vars to hold time values
let seconds = 0;
let minutes = 0;
let hours = 0;

//Define vars to hold "display" value
let displaySeconds = 0;
let displayMinutes = 0;
let displayHours = 0;

//Define var to hold setInterval() function
let interval = null;

//Define var to hold stopwatch status
let status = "stopped";

//Stopwatch function (logic to determine when to increment next value, etc.)
function stopWatch() {

  seconds++;

  //Logic to determine when to increment next value
  if (seconds / 60 === 1) {
    seconds = 0;
    minutes++;

    if (minutes / 60 === 1) {
      minutes = 0;
      hours++;
    }

  }

  //If seconds/minutes/hours are only one digit, add a leading 0 to the value
  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;
  }

  //Display updated time values to user
  document.getElementById("display").innerHTML = displayHours + ":" + displayMinutes + ":" + displaySeconds;

}



function startStop() {

  if (status === "stopped") {

    //Start the stopwatch (by calling the setInterval() function)
    interval = window.setInterval(stopWatch, 1000);
    document.getElementById("startStop").innerHTML = "Stop";
    status = "started";

  } else {

    window.clearInterval(interval);
    document.getElementById("startStop").innerHTML = "Start";
    status = "stopped";

  }

}

document.getElementById("time").addEventListener('click', function() { startStop(); });
document.body.onkeyup = function(e){ if(e.keyCode == 32){ startStop(); }};

#time {
  text-align: center;
  font-size: 80px;
  font-family: Roboto Mono;
}

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap" rel="stylesheet">

<div id="time">
  <div id="display">
    00.00
  </div>

  <div class="buttons">
    <button id="startStop" onclick="startStop()">Start</button>
  </div>
</div>