我正在尝试创建一个交通灯，但当我打开它时它似乎没有出现。我需要一些帮助。我认为问题可能出在 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 是我电脑的默认浏览器
最佳答案
我会为背景图像(灯光框架)使用一个相对容器，并使用一个 flexbox 容器来容纳三个灯，这些灯位于该相对框的中心。
我正在使用 flex parent 来存储光的状态。例如，如果按下停止按钮，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>关于javascript - 模拟交通灯，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55290403/