Question

我有这个代码，但交通信号灯太大，按钮分开很远。我尝试更换PX但它使交通灯正方形而不是圆形和光滑的矩形形状的交通灯。有帮助吗？谢谢！这就是我发生的事情。

＆＃13;

document.getElementById('stopButton').onclick = stopRed;
document.getElementById('slowButton').onclick = slowYellow;
document.getElementById('goButton').onclick = goGreen;
document.getElementById('Lights').onclick = Lights;
document.getElementById('autoLights').onclick = autoLights;

function stopRed() {
  Lights();
  document.getElementById('stopLight').style.backgroundColor = "red";
}

function slowYellow() {
  Lights();
  document.getElementById('slowLight').style.backgroundColor = "orange";
}

function goGreen() {
  Lights();
  document.getElementById('goLight').style.backgroundColor = "green";
}


function Lights() {
  document.getElementById('stopLight').style.backgroundColor = "black";
  document.getElementById('slowLight').style.backgroundColor = "black";
  document.getElementById('goLight').style.backgroundColor = "black";
}


function lightOne(num) {
  Lights();
  switch (num) {
    case 1:
      stopRed();
      break;
    case 2:
      slowYellow();
      break;
    case 3:
      goGreen();
      break;
    default:
      alert("you made some error");
  }
}

counter = 0;
maxSec = 3;

function timer() {
  setTimeout(function() {

    counter++;
    lightOne(counter);
    if (counter == maxSec) {
      return;
    }
    timer();
  }, 2000);
}

function autoLights() {
  counter = 1;
  lightOne(counter);
  timer();
}

＆＃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="stopButton" class="button">Stop</h1>
  <h1 id="slowButton" class="button">Slow</h1>
  <h1 id="goButton" class="button">Go</h1>
  <h1 id="Lights" class="button">Clear</h1>
  <h1 id="autoLights" class="button">Auto</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;

Answer 1

您只需更改.bulb和#traffic-light类的高度和宽度。

喜欢这样

#traffic-light {
   height: 400px;
   width: 150px;
   ...
}

.bulb {
   height: 100px;
   width: 100px;
   ....
}

要编辑灯泡之间的空间，只需使用margin的{{1}}属性，直到它符合您的喜好。

＆＃13;

.bulb

＆＃13;

document.getElementById('stopButton').onclick = stopRed;
document.getElementById('slowButton').onclick = slowYellow;
document.getElementById('goButton').onclick = goGreen;
document.getElementById('Lights').onclick = Lights;
document.getElementById('autoLights').onclick = autoLights;

function stopRed() {
  Lights();
  document.getElementById('stopLight').style.backgroundColor = "red";
}

function slowYellow() {
  Lights();
  document.getElementById('slowLight').style.backgroundColor = "orange";
}

function goGreen() {
  Lights();
  document.getElementById('goLight').style.backgroundColor = "green";
}


function Lights() {
  document.getElementById('stopLight').style.backgroundColor = "black";
  document.getElementById('slowLight').style.backgroundColor = "black";
  document.getElementById('goLight').style.backgroundColor = "black";
}


function lightOne(num) {
  Lights();
  switch (num) {
    case 1:
      stopRed();
      break;
    case 2:
      slowYellow();
      break;
    case 3:
      goGreen();
      break;
    default:
      alert("you made some error");
  }
}

counter = 0;
maxSec = 3;

function timer() {
  setTimeout(function() {

    counter++;
    lightOne(counter);
    if (counter == maxSec) {
      return;
    }
    timer();
  }, 2000);
}

function autoLights() {
  counter = 1;
  lightOne(counter);
  timer();
}

＆＃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: 400px;
  width: 150px;
  float: left;
  background-color: #333;
  border-radius: 40px;
  margin: 30px 0;
  padding: 20px;
}

.bulb {
  height: 100px;
  width: 100px;
  background-color: #111;
  border-radius: 50%;
  margin: 25px auto;
  transition: background 500ms;
}

＆＃13;

Answer 2

要更改按钮之间的距离，只需缩小这些按钮的margin-top和margin-bottom（我的代码段中的最后一条CSS规则）：

要减少交通灯本身的大小，请删除高度（使其取决于其内容），更改其宽度并更改灯泡的宽度和高度。

我不确定这是否是你想要的，但它应该引导你走向正确的方向。

document.getElementById('stopButton').onclick = stopRed;
document.getElementById('slowButton').onclick = slowYellow;
document.getElementById('goButton').onclick = goGreen;
document.getElementById('Lights').onclick = Lights;
document.getElementById('autoLights').onclick = autoLights;

function stopRed() {
  Lights();
  document.getElementById('stopLight').style.backgroundColor = "red";
}

function slowYellow() {
  Lights();
  document.getElementById('slowLight').style.backgroundColor = "orange";
}

function goGreen() {
  Lights();
  document.getElementById('goLight').style.backgroundColor = "green";
}


function Lights() {
  document.getElementById('stopLight').style.backgroundColor = "black";
  document.getElementById('slowLight').style.backgroundColor = "black";
  document.getElementById('goLight').style.backgroundColor = "black";
}


function lightOne(num) {
  Lights();
  switch (num) {
    case 1:
      stopRed();
      break;
    case 2:
      slowYellow();
      break;
    case 3:
      goGreen();
      break;
    default:
      alert("you made some error");
  }
}

counter = 0;
maxSec = 3;

function timer() {
  setTimeout(function() {

    counter++;
    lightOne(counter);
    if (counter == maxSec) {
      return;
    }
    timer();
  }, 2000);
}

function autoLights() {
  counter = 1;
  lightOne(counter);
  timer();
}

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 {
  width: 150px;
  float: left;
  background-color: #333;
  border-radius: 40px;
  margin: 30px 0;
  padding: 20px;
}

.bulb {
  height: 100px;
  width: 100px;
  background-color: #111;
  border-radius: 50%;
  margin: 25px auto;
  transition: background 500ms;
}

#controlPanel>h1 {
  margin-top: 15px;
  margin-bottom: 15px;
}

<div id="controlPanel">
  <h1 id="stopButton" class="button">Stop</h1>
  <h1 id="slowButton" class="button">Slow</h1>
  <h1 id="goButton" class="button">Go</h1>
  <h1 id="Lights" class="button">Clear</h1>
  <h1 id="autoLights" class="button">Auto</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>

Answer 3

保持＃traffic-light高度与宽度之比为2.75。

示例：

#traffic-light {
  height: 275px;
  width: 100px;
  float: left;
  background-color: #333;
  border-radius: 20px;
  margin: 30px 0;
  padding: 20px;
}

缩小按钮之间的间距，使按钮更近。

改变交通灯的大小

3 个答案: