Javascript 需要将特定时间间隔的图像更改为绿色

我必须设置间隔时间，将红色按钮显示为绿色，然后再次显示为红色

我有5个文本框，其中一个文本框定义了哪个按钮将首先设置为绿色的顺序。我试过下面的东西，但所有的按钮都变为红色，没有时间间隔

信号
顺序：

信号1:

信号2:

信号3:

信号4:



函数start（）{
var值=document.getElementById（“txtsequence1”）.value；
var spit=值。拆分（“，”）；
对于（var i=1；i如果我正确理解了您想要做的事情，那么这应该可以实现

我用彩色div代替图像，但这不重要

这里的想法是，我们预先计算要在数组中执行的操作，然后使用函数和setTimeout遍历该操作


var actions=[]；
var actionTimer=null；
函数resetLights（）{
from（document.queryselectoral（.abc”）.forEach（el=>el.classList.remove（“绿色”））；
}
函数playNextAction（）{
如果（！actions.length）{//无事可做？
resetLights（）；//重置，然后退出。
返回；
}
var action=actions.shift（）；//执行第一个操作
resetLights（）；//重置所有灯光
action.element.classList.add（“绿色”）；//将当前指示灯设置为绿色
actionTimer=setTimeout（playNextAction，action.interval）；//在interval中将下一个操作排队
}
函数start（）{
var值=document.getElementById（“txtsequence1”）.value；
actions=value.split（“，”）.map（（i）=>{
var interval=document.getElementById（“txt”+i）.value*1000；
var element=document.getElementById（“图像”+i）；
返回{
元素，
间隔
};
});
clearTimeout（actionTimer）；//清除任何挂起的操作
playNextAction（）；//播放下一个动作
}
.abc{
背景：红色；
显示：内联块；
边缘：1米；
填充：1em；
边界半径：100%；
颜色：#fff；
}
格林先生{
背景：石灰；
颜色：#000；
}
信号
顺序：

信号1:

信号2:

信号3:

信号4:



1.
2.
3.
4
如果我正确理解了您想要做的事情，这应该可以做到

我用彩色div代替图像，但这不重要

这里的想法是，我们预先计算要在数组中执行的操作，然后使用函数和setTimeout遍历该操作


var actions=[]；
var actionTimer=null；
函数resetLights（）{
from（document.queryselectoral（.abc”）.forEach（el=>el.classList.remove（“绿色”））；
}
函数playNextAction（）{
如果（！actions.length）{//无事可做？
resetLights（）；//重置，然后退出。
返回；
}
var action=actions.shift（）；//执行第一个操作
resetLights（）；//重置所有灯光
action.element.classList.add（“绿色”）；//将当前指示灯设置为绿色
actionTimer=setTimeout（playNextAction，action.interval）；//在interval中将下一个操作排队
}
函数start（）{
var值=document.getElementById（“txtsequence1”）.value；
actions=value.split（“，”）.map（（i）=>{
var interval=document.getElementById（“txt”+i）.value*1000；
var element=document.getElementById（“图像”+i）；
返回{
元素，
间隔
};
});
clearTimeout（actionTimer）；//清除任何挂起的操作
playNextAction（）；//播放下一个动作
}
.abc{
背景：红色；
显示：内联块；
边缘：1米；
填充：1em；
边界半径：100%；
颜色：#fff；
}
格林先生{
背景：石灰；
颜色：#000；
}
信号
顺序：

信号1:

信号2:

信号3:

信号4:



1.
2.
3.
4
信号
顺序：

信号1:

信号2:

信号3:

信号4:



var计数=0；
函数start（）{
var值=document.getElementById（“txtsequence1”）.value；
var spit=值。拆分（“，”）；
var IntervaluePto=0；
对于（var i=1；i
信号
顺序：

信号1:

信号2:

信号3:

信号4:



var计数=0；
函数start（）{
var值=document.getElementById（“txtsequence1”）.value；
var spit=值。拆分（“，”）；
var IntervaluePto=0；
对于（var i=1；i它在image1上不会停留5秒钟，而且最后4也应该被转换为red@miteshjain修正了。在我不耐烦的时候，我用100毫秒作为乘法器，而不是1000。还添加了重置。它不会在image1上停留5秒，而且最后4也应该被转换为red@miteshjain修正了。在我不耐烦的时候，我有100毫秒作为乘数，不是1000。也添加了重置。
<h2>signal</h2>

sequence : <input type="text" id="txtsequence1" value="1,3,2,4" /><br />
signal 1 :<input type="text" id="txt1" value="5" /><br />
signal 2 :<input type="text" id="txt2" value="2" /><br />
signal 3 :<input type="text" id="txt3" value="6" /><br />
signal 4:<input type="text" id="txt4" value="7" /><br />


<input type="button" onclick="return start()" value="Submit" />
<br />
<img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image1" alt="">
<img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image2" alt="">
<img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image3" alt="">
<img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image4" alt="">

<script>
    var count = 0;
    function start() {

        var value = document.getElementById("txtsequence1").value;
        var spit = value.split(",");
        var intervalUpto = 0;

        for (var i = 1; i <= spit.length; i++) {
            count = spit[i - 1];
            var intervalCurrent = document.getElementById("txt" + count).value * 1000;           
            var b = createInterval(funcb, count, intervalUpto);
            createInterval(clearInterval, b, intervalUpto);
            intervalUpto = intervalUpto + intervalCurrent;
            var a = createInterval(funca, count, intervalUpto);
            createInterval(clearInterval, a, intervalUpto);
        }

        function funca(id) {
            var images = document.getElementById("image" + id);
            images.src = "/Images/red.jpg";
        }

        function funcb(id) {
            var images = document.getElementById("image" + id);
            images.src = "/Images/green.jpg";
        }
        function clearInterval(id) { clearTimeout(id); }

        function createInterval(f, dynamicParameter, interval) { return setInterval(function () { f(dynamicParameter); }, interval); }
    }
</script>