Javascript 我将如何使这个交通灯序列自动化？

document.getElementById（'AllButton'）。onclick=switchAll；
函数Illuminated（）{
清晰的灯光（）；
document.getElementById（'stopLight'）.style.backgroundColor=“红色”；
}
函数illuminateOrange（）{
清晰的灯光（）；
document.getElementById（'slowLight'）.style.backgroundColor=“橙色”；
}
函数illuminatedgreen（）{
清晰的灯光（）；
document.getElementById（'goLight'）.style.backgroundColor=“绿色”；
}
函数IlluminatedRedoRange（）{
清晰的灯光（）；
document.getElementById（'stopLight'）.style.backgroundColor=“红色”；
document.getElementById（'slowLight'）.style.backgroundColor=“橙色”；
}
函数illuminatedblack（）{
清晰的灯光（）；
}
函数clearLights（）{
document.getElementById（'stopLight'）.style.backgroundColor=“黑色”；
document.getElementById（'slowLight'）.style.backgroundColor=“黑色”；
document.getElementById（'goLight'）.style.backgroundColor=“黑色”；
}
var点击次数=0；
var变化=1；
函数switchAll（）{
点击次数++；
开关（点击次数）{
案例1：
清晰的灯光（）；
document.getElementById（'stopLight'）.style.backgroundColor=“红色”；
打破
案例2：
清晰的灯光（）；
document.getElementById（'stopLight'）.style.backgroundColor=“红色”；
document.getElementById（'slowLight'）.style.backgroundColor=“橙色”；
打破
案例3：
清晰的灯光（）；
document.getElementById（'goLight'）.style.backgroundColor=“绿色”；
打破
案例4：
清晰的灯光（）；
document.getElementById（'slowLight'）.style.backgroundColor=“橙色”；
打破
案例5：
清晰的灯光（）；
document.getElementById（'stopLight'）.style.backgroundColor=“红色”；
打破
案例6：
document.getElementById（'stopLight'）.style.backgroundColor=“黑色”；
document.getElementById（'slowLight'）.style.backgroundColor=“黑色”；
document.getElementById（'goLight'）.style.backgroundColor=“黑色”；
点击次数=0
打破
}
}

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

转换

如评论中所述，我会使用

setInterval

。但是为了把它写进代码，我做了这个例子。此外，我将灯光放入对象中，使其更加紧凑

/*
净光物体
*/
功能灯（颜色、元素）{
这个颜色=颜色；
this.element=document.getElementById（元素）；
}
Light.prototype={
关于：函数（）{
this.element.style.backgroundColor=this.color；
},
关闭：函数（）{
this.element.style.backgroundColor=“黑色”；
}
}
/*
初始化
*/
var灯=[新灯（“绿色”、“绿色”），
新光（“橙色”、“慢光”），
新灯（“红色”、“红灯”）
];
变量序列=[“绿色”]、[“绿色”、“橙色”]、[“红色”]，
位置=0，
定时器=空；
var go=document.getElementById（“go”），
stop=document.getElementById（“stop”）；
go.onclick=function（）{
清除超时（计时器）；
计时器=设置间隔（函数（）{
灯光。forEach（功能（灯光）{
if（sequence[position].indexOf（light.color）>-1）light.on（）；
否则就亮了；
});
如果（position++>=sequence.length-1）position=0；
}, 2000);
}
stop.onclick=函数（）{
清除超时（计时器）；
}

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

去
停止

setInterval/clearInterval

如果您将灯光元素存储在变量中，例如

var stopLight=document.getElementById（'stopLight'），您的程序将更加高效和干净

然后将它们重新用作：

stopLight.style.backgroundColor=“red”

。我编辑了您的问题，将您的解决方案放入一个片段中，以便更好地组织每个部分，这样就可以在其中运行您的解决方案了。@abining这个答案足够了吗？还是在等待另一种方法