javascript - JS - 使用空格键更改元素的颜色

我有一个程序应该是这样的:如果我按空格键，它应该将元素的颜色更改为红色，然后，如果在 700 毫秒后仍然按下它，它应该更改背景另一种元素变为绿色。如果我在 700 毫秒之前停止按空格键，它应该变成黑色。然后，在一个元素变成绿色后，它应该启动一个计时器，并且还“闪烁”元素(每 200 毫秒在黑色和红色/绿色之间快速交替)。但是，它无法正常工作。这是我的代码:

//This is my main.js file
var toggleBtn = document.getElementById('toggle');
var redDiv = document.getElementById('red');
var greenDiv = document.getElementById('green');
var done = false;
var watchIsOn = false;//this is actually done in my timer.js

function blink() {
  redDiv.style.background="red";
  greenDiv.style.background="green";
}

function f1() {
  if ((watchIsOn) && (!done)) {
    //watch.stop(); This is a function in my timer.js
    redDiv.style.background = "#111";
    greenDiv.style.background = "#111";
    toggleBtn.textContent = "start";
    done = true;
  }
  else if ((!watchIsOn) && (!done)) {
    //watch.start(); This is a function in my timer.js
    toggleBtn.textContent = "stop";
    setInterval(blink, 200);
    redDiv.style.background = "#111";
    greenDiv.style.background = "#111";
  }
  else if ((!watchIsOn) && (done)) {
    //watch.reset(); This is a function in my timer.js
    done = false;
    f1();
  }
}

function f2() {
  //watch.reset(); This is a function in my timer.js
}

function green() {
  window.onkeydown = function(Event) {
    if ((Event.which == 32) && (!done)) {
      greenDiv.style.background = "green";
    }
  }
}

window.onkeydown = function(Event) {
  if ((Event.which == 32) && (!done)) {
    redDiv.style.background = "red";
    setTimeout(green, 700);
  }
}

window.onkeyup = function(event) {
  if (event.which == 32) {
     f1();
  }
  else if ((watchIsOn) && (!done)) {
    done = true;
    //watch.stop(); This is a function in my timer.js
    toggleBtn.textContent = "start";
  }
}

.timer {
  background-color: #111;
  color: aliceblue;
  padding: 1%;
  text-align: center;
}

#red, #green {
  border-radius: 5px;
  margin: 3%;
  padding: 1px;
  width: 41%;
  height: 35px;
  background-color: #111;
}

#red {
  float: left;
}

#green {
    float: right;
}

<html>
  <head>
    <title>My website</title>
  </head>
  <body>
    <header><h1>My website</h1></header>
    <div class="timer">
      <div id="red"></div>  <div id="green"></div>
      <h1 id="timer">0:00.000</h1><!-- I have a timer.js file that calculates the time and updates it over here. -->
      <button id="toggle" onclick="f1();, watchisOn=true;">start</button>
      <button onclick="f2()">reset</button>
      <script src="timer.js"></script>
      <script src="main.js"></script>
    </div>
  </body>
</html>

最佳答案

由于您有兴趣了解空格键何时被释放，因此您应该使用 onkeyup 和 onkeydown 事件。然后，您的事件处理程序可以相应地启动和停止计时器。这是一个“快速而肮脏”的解决方案，您可以进一步完善。

var stage = 0; // 0 = reset, 1 = red, 2 = blinking
var red = document.getElementById('red');
var green = document.getElementById('green');
var timerId1 = null;
var timerId2 = null;

function doBlink() {
  stage = 2;
  timerId2 = setInterval(function() {
    if (red.className === "") {
      red.className = "hidden";
      green.className = "";
    } else {
      red.className = "";
      green.className = "hidden";
    }
  }, 200);
}

function setupGreen() {
  timerId1 = setTimeout(function() {
    if (stage === 1) {
      green.className = "";
      doBlink();
    }
  }, 700);
}

function reset() {
  stage = 0;
  green.className = "hidden";
  red.className = "hidden";
  if (timerId1) {
    clearTimeout(timerId1);
    timerId1 = null;
  }
  if (timerId2) {
    clearTimeout(timerId2);
    timerId2 = null;
  }

}

document.body.onkeydown = function(e) {
  if (e.keyCode == 32) {
    if (stage === 0) {
      stage = 1;
      red.className = "";
      setupGreen();
    }
  }
}

document.body.onkeyup = function(e) {
  if (e.keyCode == 32) {
    if (stage === 1) {
      reset();
    }
  }
}

.timer {
  background-color: #111;
  color: aliceblue;
  padding: 1%;
  text-align: center;
}

#red,
#green {
  border-radius: 5px;
  margin: 3%;
  padding: 1px;
  width: 41%;
  height: 35px;
  background-color: #111;
}

#red {
  float: left;
  background: red;
}

#green {
  float: right;
  background: green;
}

.hidden {
  background: black !important;
}

<html>

<head>
  <title>My website</title>
</head>

<body>
  <header>
    <h1>My website</h1>
  </header>
  <div class="timer">
    <div id="red" class="hidden"></div>
    <div id="green" class="hidden"></div>
    <button onclick="reset()">reset</button>
  </div>
</body>

</html>

关于javascript - JS - 使用空格键更改元素的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46131563/

javascript - JS - 使用空格键更改元素的颜色

上一篇：javascript - 链接外部 JS 文件

下一篇：javascript - “this”关键字如何工作？