javascript - 按下按钮时，如何使此交通灯序列重复多次>

document.getElementById('AllButton').onclick = switchAll;

function illuminateRed() {
  clearLights();
  document.getElementById('stopLight').style.backgroundColor = "red";
}

function illuminateOrange() {
  clearLights();
  document.getElementById('slowLight').style.backgroundColor = "orange";
}

function illuminateGreen() {
  clearLights();
  document.getElementById('goLight').style.backgroundColor = "green";
}

function illuminateRedOrange() {
  clearLights();
  document.getElementById('stopLight').style.backgroundColor = "red";
  document.getElementById('slowLight').style.backgroundColor = "orange";
}

function illuminateBlack() {
  clearLights();

}

function clearLights() {
  document.getElementById('stopLight').style.backgroundColor = "black";
  document.getElementById('slowLight').style.backgroundColor = "black";
  document.getElementById('goLight').style.backgroundColor = "black";
}

var clickTimes = 0;
var change = 1;

function switchAll() {
  clickTimes++;
  switch (clickTimes) {
    case 1:
      clearLights();
      document.getElementById('stopLight').style.backgroundColor = "red";
      break;
    case 2:
      clearLights();
      document.getElementById('stopLight').style.backgroundColor = "red";
      document.getElementById('slowLight').style.backgroundColor = "orange";
      break;
    case 3:
      clearLights();
      document.getElementById('goLight').style.backgroundColor = "green";
      break;
    case 4:
      clearLights();
      document.getElementById('slowLight').style.backgroundColor = "orange";
      break;
    case 5:
      clearLights();
      document.getElementById('stopLight').style.backgroundColor = "red";
      break;
    case 6:
      document.getElementById('stopLight').style.backgroundColor = "black";
      document.getElementById('slowLight').style.backgroundColor = "black";
      document.getElementById('goLight').style.backgroundColor = "black";
      break;

  }
}

body {
  font-family: sans-serif;
}
#controlPanel {
  float: left;
  padding-top: 30px;
}
.button {
  background-color: gray;
  color: white;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  margin: 90px 40px;
  cursor: pointer;
}
#traffic-light {
  height: 550px;
  width: 200px;
  float: left;
  background-color: #333;
  border-radius: 40px;
  margin: 30px 0;
  padding: 20px;
}
.bulb {
  height: 150px;
  width: 150px;
  background-color: #111;
  border-radius: 50%;
  margin: 25px auto;
  transition: background 500ms;
}

<div id="controlPanel">
  <h1 id="AllButton" class="button">Switch</h1>
</div>
<div id="traffic-light">
  <div id="stopLight" class="bulb"></div>
  <div id="slowLight" class="bulb"></div>
  <div id="goLight" class="bulb"></div>
</div>

这是我的 ICT 类(class)作业，我们必须构建一个交通灯系统，我的代码目前正在运行。然而，一旦我按下屏幕上的按钮并且每次点击都循环通过可能的组合，交通灯就完成了它的序列，它不会再次重复。我想知道是否有人可以帮助我让它循环，我将不胜感激，谢谢，我是编码新手，如果它关闭，很抱歉。

最佳答案

只需在最后一个 clickTimes = 0; 之前写 break 。

这是 fiddle :https://jsfiddle.net/7oa28cta/

关于javascript - 按下按钮时，如何使此交通灯序列重复多次>，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37301948/