Javascript 改变交通灯的大小

我有这个密码，但是交通灯太大了，按钮分开得太远了。我试着改变PX，但它使交通灯变成正方形而不是圆形，交通灯的形状变成平滑的矩形。 有什么帮助吗？ 谢谢 这就是发生在我身上的事

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；
函数stopRed（）{
灯光（）；
document.getElementById（'stopLight'）.style.backgroundColor=“红色”；
}
函数slowYellow（）{
灯光（）；
document.getElementById（'slowLight'）.style.backgroundColor=“橙色”；
}
函数goGreen（）{
灯光（）；
document.getElementById（'goLight'）.style.backgroundColor=“绿色”；
}
功能灯（）{
document.getElementById（'stopLight'）.style.backgroundColor=“黑色”；
document.getElementById（'slowLight'）.style.backgroundColor=“黑色”；
document.getElementById（'goLight'）.style.backgroundColor=“黑色”；
}
函数lightOne（num）{
灯光（）；
开关（num）{
案例1：
停止（）；
打破
案例2：
slowYellow（）；
打破
案例3：
戈格林（）；
打破
违约：
警惕（“你犯了一些错误”）；
}
}
计数器=0；
maxSec=3；
函数计时器（）{
setTimeout（函数（）{
计数器++；
lightOne（计数器）；
如果（计数器==最大秒）{
返回；
}
定时器（）；
}, 2000);
}
函数autoLights（）{
计数器=1；
lightOne（计数器）；
定时器（）；
}

正文{
字体系列：无衬线；
}
#控制面板{
浮动：左；
填充顶部：30px；
}
.按钮{
背景颜色：灰色；
颜色：白色；
边界半径：10px；
填充：20px；
文本对齐：居中；
利润率：90px 40px；
光标：指针；
}
#交通灯{
高度：550px；
宽度：200px；
浮动：左；
背景色：#333；
边界半径：40px；
利润率：30px0；
填充：20px；
}
.灯泡{
高度：150像素；
宽度：150px；
背景色：#111；
边界半径：50%；
保证金：25像素自动；
过渡：背景500ms；
}

停止
慢
去
清楚的
自动的

只需更改

.bulb

和

#红绿灯的高度和宽度即可

像这样

交通灯{
高度：400px；
宽度：150px；
...
}
.灯泡{
高度：100px；
宽度：100px；
....
}

要编辑灯泡之间的间距，只需使用

.bulb

的

边距
属性，直到它符合您的喜好


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；
函数stopRed（）{
灯光（）；
document.getElementById（'stopLight'）.style.backgroundColor=“红色”；
}
函数slowYellow（）{
灯光（）；
document.getElementById（'slowLight'）.style.backgroundColor=“橙色”；
}
函数goGreen（）{
灯光（）；
document.getElementById（'goLight'）.style.backgroundColor=“绿色”；
}
功能灯（）{
document.getElementById（'stopLight'）.style.backgroundColor=“黑色”；
document.getElementById（'slowLight'）.style.backgroundColor=“黑色”；
document.getElementById（'goLight'）.style.backgroundColor=“黑色”；
}
函数lightOne（num）{
灯光（）；
开关（num）{
案例1：
停止（）；
打破
案例2：
slowYellow（）；
打破
案例3：
戈格林（）；
打破
违约：
警惕（“你犯了一些错误”）；
}
}
计数器=0；
maxSec=3；
函数计时器（）{
setTimeout（函数（）{
计数器++；
lightOne（计数器）；
如果（计数器==最大秒）{
返回；
}
定时器（）；
}, 2000);
}
函数autoLights（）{
计数器=1；
lightOne（计数器）；
定时器（）；
}
正文{
字体系列：无衬线；
}
#控制面板{
浮动：左；
填充顶部：30px；
}
.按钮{
背景颜色：灰色；
颜色：白色；
边界半径：10px；
填充：20px；
文本对齐：居中；
利润率：90px 40px；
光标：指针；
}
#交通灯{
高度：400px；
宽度：150px；
浮动：左；
背景色：#333；
边界半径：40px；
利润率：30px0；
填充：20px；
}
.灯泡{
高度：100px；
宽度：100px；
背景色：#111；
边界半径：50%；
保证金：25像素自动；
过渡：背景500ms；
}

停止
慢
去
清楚的
自动的
要更改按钮之间的距离，只需减少这些按钮的页边距顶部和页边距底部（我的代码片段中的最后一条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；
函数stopRed（）{
灯光（）；
document.getElementById（'stopLight'）.style.backgroundColor=“红色”；
}
函数slowYellow（）{
灯光（）；
document.getElementById（'slowLight'）.style.backgroundColor=“橙色”；
}
函数goGreen（）{
灯光（）；
document.getElementById（'goLight'）.style.backgroundColor=“绿色”；
}
功能灯（）{
document.getElementById（'stopLight'）.style.backgroundColor=“黑色”；
document.getElementById（'slowLight'）.style.backgroundColor=“黑色”；
document.getElementById（'goLight'）.style.backgroundColor=“黑色”；
}
函数lightOne（num）{
灯光（）；
开关（num）{
案例1：
停止（）；
#traffic-light {
  height: 275px;
  width: 100px;
  float: left;
  background-color: #333;
  border-radius: 20px;
  margin: 30px 0;
  padding: 20px;
}