Javascript 交通灯

换灯
var灯=[
“资产/red.gif”，
“资产/yellow.gif”，
“assets/green.gif”，
“资产/yellow.gif”，
];
var指数=0；
函数ChangeLights（）{
setInterval（函数（）{ChangeLights（）；}，1000）；
指数=指数+1；
如果（index==lights.length）index=0；
var image=document.getElementById（'traffic'）；
image.src=lights[index]；
}

如果要查找一个时间序列，则必须在javascript中使用“setTimeout”方法，此外，还要定义如下所示的内部函数：

var灯=[
“资产/red.gif”，
“资产/yellow.gif”，
“assets/green.gif”，
“资产/yellow.gif”，
];
var指数=0；
函数ChangeLights（）{
函数innerChangeLight（）{
指数=指数+1；
如果（index==lights.length）index=0；
var image=document.getElementById（'traffic'）；
image.src=lights[index]；
}
innerChangeLight（）；
setTimeout（函数（）{
innerChangeLight（）；
}, 1000);
}

换灯

试试这个：

var灯=[
“资产/red.gif”，
“资产/yellow.gif”，
“assets/green.gif”，
“资产/yellow.gif”，
];
var指数=0；
函数ChangeLights（）{
setInterval（函数（）{
如果（索引==灯光长度）{
返回；
}
var image=document.getElementById（'traffic'）；
image.src=lights[index]；
指数=指数+1；
}, 1000);
}

换灯

var灯={
红色：“https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Traffic_lights_red.svg/200px-Traffic_lights_red.svg.png",
黄色：“https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Traffic_lights_yellow.svg/200px-Traffic_lights_yellow.svg.png",
绿色：“https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Traffic_lights_dark_green.svg/200px-Traffic_lights_dark_green.svg.png"
};
变量序列=[“红色”、“黄色”、“绿色”、“黄色”]；
函数startChangeLights（）{
对于（变量索引=0；索引

换灯

新的“红绿灯”实例： 交通信号灯不可能总是在每个信号灯中保持相同的持续时间

所以，我开始扩展这个html代码。。 改进的代码在每个灯光下都有不同的秒数：

//交通灯
//每种光线下的持续时间都有所提高！
//但在这段html代码中，我将使用输入标记
var TrafficLights=（函数（）{
//形象
var imageTag=document.getElementById（“lightImg”）；
//跟踪序列是否正在运行
var running=false；
//交通灯的不同阶段（也定义了交通灯）
var阶段=[
{
“名称”：“红色”，
“路径”：https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Traffic_lights_red.svg/200px-Traffic_lights_red.svg.png",
},
{
“名称”：“绿色”，
“路径”：https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Traffic_lights_dark_green.svg/200px-Traffic_lights_dark_green.svg.png"
},
{
“名称”：“黄色”，
“路径”：https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Traffic_lights_yellow.svg/200px-Traffic_lights_yellow.svg.png"
}
];
//每次灯光变化的秒数不同（必须是正整数！）
var秒数每步=[
18,
24,
3.
];
//交通灯的当前阶段
var阶段=0；
//交通灯的当前步骤
var步长=0；
//自动变光计时器
var定时器=null；
/***启动交通灯序列**/
函数start（）{
//标记灯光序列正在运行
运行=真；
//让灯变亮
changeLight（）；
}
/***停止序列运行**/
函数停止（）{
//标记序列未运行
运行=错误；
//停止自动定时器的运行
清除间隔（计时器）；
}
/***将灯光切换到序列中的下一个**/
函数changeLight（）{
//如果计时器未运行，则此函数不需要执行任何操作
如果（正在运行===false）{
清除间隔（计时器）；
返回；
}else{}；
//如果当前阶段高于存在的阶段数，则重置为0
如果（阶段>=阶段长度）{
阶段=0；
}else{}；
//如果当前步数高于步骤中的秒数，则重置为0
如果（步长>=每步长秒数）{
步长=0；
}else{}；
//从阶段列表中获取图像
var图像=阶段[阶段]；
var wait_seconds=每一步[步]的秒数；
//更新图像标记并定义灯光名称
imageTag.src=image.path；
imageTag.alt=String（“交通灯颜色为“+image.name+”）；
//将当前阶段增加1
stage++；
//将当前步长增加1
steps++；
//设置超时以在下一个间隔更改灯光
定时器=设置超时（更改灯，等待秒*1000）；
}
//这些功能将在“TrafficLights”对象上提供，以允许交互
返回{
开始：开始，
停：停
}
})();




开始顺序停止顺序

var red=document.getElementById（“红色”）；
var yellow=document.getElementById（“黄色”）；
var green=document.getElementById（“绿色”）；
var btn=document.createElement（“按钮”）；
btn.innerHTML=“单击我”；
文件.正文.附件（btn）；
red.style.opacity=“1”；
yellow.style.opacity=“0.2”；
green.style.opacity=“0.2”；
btn.onclick=函数（）{
setTimeout（函数（）{red.style.opacity=“0.2”；