Javascript 交通信号灯的模拟_Javascript_Html_Css

Javascript 交通信号灯的模拟

javascript html css

Javascript 交通信号灯的模拟,javascript,html,css,Javascript,Html,Css,我试图创造一个交通灯，但它似乎没有显示，当我打开它。我想要一些帮助。我认为问题可能出在HTML文件中这是javascript代码 document.getElementById('stopButton').onclick = illuminateRed; document.getElementById('goButton'). onclick = illuminateGreen; document.getElementById('slowButton'). onclick

我试图创造一个交通灯，但它似乎没有显示，当我打开它。我想要一些帮助。我认为问题可能出在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;
}

 <!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代码

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

 <!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父级存储灯光状态。例如，如果按下停止按钮，HTML将以如下方式显示：

然后，

CSS

可以“打开”活动灯

.lights.stop.light.red{
背景色：红色；
}

演示

constlightcontroller=document.querySelector（“.lights”）；
const lights=document.queryselectoral（“.change light”）；
函数clearLights（）{
lightController.className=“灯光关闭”；
}
函数handleClick（）{
//清除任何按钮上的灯光单击
清晰的灯光（）；
/*其中一个函数通过侦听
每个按钮中的类名*/
if（this.classList.contains（“stop”））{
lightController.classList.add（“停止”）；
}else if（this.classList.contains（“slow”））{
lightController.classList.add（“慢”）；
}else if（this.classList.contains（“go”））{
lightController.classList.add（“go”）；
}
}
//循环遍历每个LIGHT并绑定一个单击事件
lights.forEach（light=>{
light.addEventListener（“单击”，handleClick）；
});
.light容器{
背景图片：url(https://i.postimg.cc/rmDtJD3k/light2.jpg);
背景重复：无重复；
背景色：透明；
背景尺寸：封面；
宽度：200px；
高度：235px；
位置：相对位置；
边缘底部：1米；
}
.灯光{
位置：绝对位置；
显示器：flex；
弯曲方向：立柱；
左：50%；
转化：translateX（-50%）；
垫面：1.7em；
}
.光{
边界半径：50%；
宽度：59px；
高度：57px；
过渡：0.5s背景色缓进缓出；
背景色：#333；
}
.灯光：不（：最后一个孩子）{
边缘底部：0.85em；
}
.灯.停车.灯.红色{
背景色：红色；
}
.灯.慢.灯.黄{
背景颜色：黄色；
}
.lights.go.light.green{
背景颜色：绿色；
}
.灯.关.灯{
背景色：#333；
}
.换灯{
字号：1.2rem；
}

停止
慢
转到
请添加您的代码欢迎加入堆栈溢出！你需要问一个可以用代码来回答的问题。有关如何执行此操作的提示，请参阅。您的html不完整-它缺少元素，例如stopLight slowLight goLight…我需要包括什么？JavaScript代码中引用的所有html元素的定义-例如document.getElementById（“goButton”）。