当按下按钮时，如何使该交通灯序列重复多次？

Question

＆＃13;

＆＃13;

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;

  }
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是我的ICT课程，我们必须建立一个红绿灯系统，我的代码到目前为止。但是，一旦我按下屏幕上的按钮并且每次点击都循环通过可能的组合，红绿灯已完成其序列，它不会再次重复。我想知道是否有人可以帮助我让它循环，我将不胜感激，谢谢，我是编码的新手，很抱歉，如果它关闭。

Answer 1

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

这是小提琴：https://jsfiddle.net/7oa28cta/

Answer 2

您应该更改元素的class属性，而不是使用javascript更改背景颜色，例如对于ID为＃34; stopLight＆＃34;：

的元素

document.getElementById("stopLight").className = "blink-several-times";

然后在您设置的类上使用CSS动画而不是CSS过渡，例如：

.blink-several-times {
  animation: myAnimation linear 4s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: myAnimation linear 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: myAnimation linear 4s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: myAnimation linear 4s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: myAnimation linear 4s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

@keyframes myAnimation{
  0% {
    background-color: rgba(0, 128, 0, 0);
  }
  100% {
    background-color: rgba(0, 128, 0, 1);
  }
}

@-moz-keyframes myAnimation{
  0% {
    -moz-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
    -moz-transform:  translate(200px,0px)  rotate(180deg) ;
  }
}

@-webkit-keyframes myAnimation {
  0% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
    -webkit-transform:  translate(200px,0px)  rotate(180deg) ;
  }
}

@-o-keyframes myAnimation {
  0% {
    -o-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
    -o-transform:  translate(200px,0px)  rotate(180deg) ;
  }
}

@-ms-keyframes myAnimation {
  0% {
    -ms-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
    -ms-transform:  translate(200px,0px)  rotate(180deg) ;
  }
}

＆＃34; animation-iteration-count＆＃34;设置迭代次数。如果它＆＃34;无限＆＃34;动画将无休止地循环。

跨浏览器支持需要许多不同的行-webkit，-o，-moz等。

为了生成css动画代码，我建议使用像http://cssanimate.com/

这样的CSS动画生成器

Answer 3

简短解决方案

var traffic_button = document.querySelector('.traffic-button');

if (traffic_button) {
  traffic_button.addEventListener('click', traffic, false);
}

var clicks = 0;

function traffic() {
  var lights = document.querySelectorAll(this.dataset.lights + ' .bulb');

  if (lights.length !== clicks) {
    switch (clicks) {
      case 0:
        offLights();
        lights[clicks].classList.add('active');
        clicks++;
        break;
      case 1:
        offLights();
        lights[clicks - 1].classList.add('active');
        lights[clicks].classList.add('active');
        clicks++;
        break;
      case 2:
        offLights();
        lights[clicks].classList.add('active');
        clicks++;
        break;
      default:
        break;
    }
  } else {
    offLights();
    clicks = 0;
  }

  function offLights() {
    for (var i = 0; i < lights.length; i++) {
      var element = lights[i];
      if (element.classList.contains('active')) {
        element.classList.remove('active');
      }
    }
  }
}

#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;
}
.bulb.red.active {
  background: red;
}
.bulb.yellow.active {
  background: yellow;
}
.bulb.green.active {
  background: green;
}

<div id="controlPanel">
  <h1 id="button" data-lights="#traffic-light" class="traffic-button button">Switch</h1>
</div>
<div id="traffic-light">
  <div class="bulb red"></div>
  <div class="bulb yellow"></div>
  <div class="bulb green"></div>
</div>

Answer 4

最简单的方法是：

 case 6:
        document.getElementById('stopLight').style.backgroundColor = "black";
        document.getElementById('slowLight').style.backgroundColor = "black";
        document.getElementById('goLight').style.backgroundColor = "black";
        clickTimes = 1;
        break;

但是我会考虑这样做是一种更有效的方法，就像使用for循环来实现这一点而不必每次都手动点击它一样。