Question

我正在尝试创建一个交通信号灯，但是当我打开它时似乎没有出现。我想要一些帮助。我认为问题可能出在HTML文件中。

这是JavaScript代码

document.getElementById('stopButton').onclick = illuminateRed;

 document.getElementById('goButton').
       onclick = illuminateGreen;

document.getElementById('slowButton').
onclick = illuminateYellow;


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

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

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


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

这是下面的css代码

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

这是下面的html代码

 <!DOCTYPE html>

     <html>
           <head>

        <script src="trafficLights.js" type="text/javascript></script"></script>

            <link href="trafficLight.css" type="text/css" rel="stylesheet">

</head>


    </html>

当我打开html文件时，仅显示一个空白页面。 Chrome是我计算机的默认浏览器

Answer 1

我将使用一个相对容器来放置背景图像（光取景），并使用一个flexbox容器来容纳位于该相对框中心的三盏灯。

我正在使用flex父级存储光的状态。例如，如果按下停止按钮，则HTML将以这种方式显示：

<div class="lights off stop">
  <div class="light red"></div>
  <div class="light yellow"></div>
  <div class="light green"></div>
</div>

然后，CSS可以“打开”活动灯。

.lights.stop .light.red {
  background-color: red;
}

演示

const lightController = document.querySelector(".lights");
const lights = document.querySelectorAll(".change-light");
function clearLights() {
  lightController.className = "lights off";
}
function handleClick() {
  // Clear lights on any button click
  clearLights();
  
  /* One function handles all the lights by listening for a 
     class name within each button */
  if (this.classList.contains("stop")) {
    lightController.classList.add("stop");
  } else if (this.classList.contains("slow")) {
    lightController.classList.add("slow");
  } else if (this.classList.contains("go")) {
    lightController.classList.add("go");
  }
}
// Loop through each ligth and bind a click event 
lights.forEach(light => {
  light.addEventListener("click", handleClick);
});

.light-container {
  background-image: url(https://i.postimg.cc/rmDtJD3k/light2.jpg);
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: cover;
  width: 200px;
  height: 235px;
  position: relative;
  margin-bottom: 1em;
}

.lights {
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 1.7em;
}

.light {
  border-radius: 50%;
  width: 59px;
  height: 57px;
  transition: 0.5s background-color ease-in-out;
  background-color: #333;
}

.light:not(:last-child) {
  margin-bottom: 0.85em;
}

.lights.stop .light.red {
  background-color: red;
}

.lights.slow .light.yellow {
  background-color: yellow;
}

.lights.go .light.green {
  background-color: green;
}

.lights.off .light {
  background-color: #333;
}

.change-light {
  font-size: 1.2rem;
}

<div class="light-container">
  <div class="lights">
    <div class="light red"></div>
    <div class="light yellow"></div>
    <div class="light green"></div>
  </div>
</div>
<button class="change-light stop">Stop</button>
<button class="change-light slow">Slow</button>
<button class="change-light go">Go</button>

模拟交通信号灯

1 个答案:

演示