文章/答案/技术大牛

发布

社区首页 >问答首页 >交通灯的模拟

问交通灯的模拟
EN

Stack Overflow用户

提问于 2019-03-22 06:51:28

回答 1查看 650关注 0票数 1

我试图创建一个红绿灯，但当我打开它时，它似乎没有显示出来。我想要一些帮助。我认为问题可能出在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是我电脑的默认浏览器

javascript

html

css

回答 1

Stack Overflow用户

发布于 2019-03-22 07:25:45

我将使用一个相对容器作为背景图像(灯光框)，并使用一个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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55290403

复制

相似问题

问交通灯的模拟
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问交通灯的模拟EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问交通灯的模拟
EN