需要在特定时间间隔内将图像更改为绿色

Question

I have to set interval time to show my red button to green and then again to red.

I have 5 text box where one text box is defining the sequence that which button will 1st set to green. I have tried bellow thing but all button gets change to red with out time interval.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <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="img1"> <img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image2" alt="img2"> <img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image3" alt="img3"> <img class="abc" src="~/Images/red.jpg" style="height:25px;width:25px" id="image4" alt="img4"> <script> function start() { var value = document.getElementById("txtsequence1").value; var spit = value.split(","); for (var i = 1; i <= spit.length; i++) { var interval = document.getElementById("txt" + i).value * 1000; var images = document.getElementById("image" + i); images.src = "/Images/green.jpg"; setInterval(changegred, interval); } function changegred() { $(".abc").attr("src", "/Images/red.jpg") } } </script> 

What I want that in seq table it is define as 1,3,2,4 and in other text box the time interval for 1 image is set as 5

1. Now for 1 image time interval is set as 5 so the 1 image will change red image to green for 5 second

2. Now for 3 image time interval is set as 6 so the 1 image will change to red and 3 image will set as green

3. now in 2 image time interval is set as 2 so the 3 image will change to red and 2 image will set as green

4. now in 4 image time interval is set as 7 so the 2 image will change to red and 4 image will set as green

Answer 1

If I understood what you want to do correctly, this should do the trick.

I'm using colored divs instead of images, but that shouldn't matter.

The idea here is that we precompute the actions we want to take into an array, and then walk through that with a function and setTimeout.

 var actions = []; var actionTimer = null; function resetLights() { Array.from(document.querySelectorAll(".abc")).forEach(el => el.classList.remove("green")); } function playNextAction() { if (!actions.length) { // nothing to do? resetLights(); // reset, then quit. return; } var action = actions.shift(); // take the first action resetLights(); // reset all lights action.element.classList.add("green"); // set the current light to green actionTimer = setTimeout(playNextAction, action.interval); // enqueue next action in interval } function start() { var value = document.getElementById("txtsequence1").value; actions = value.split(",").map((i) => { var interval = document.getElementById("txt" + i).value * 1000; var element = document.getElementById("image" + i); return { element, interval }; }); clearTimeout(actionTimer); // clear any pending action playNextAction(); // play next action } 

 .abc { background: red; display: inline-block; margin: 1em; padding: 1em; border-radius: 100%; color: #fff; } .abc.green { background: lime; color: #000; } 

 <h2>signal</h2> sequence : <input type="text" id="txtsequence1" value="1,3,2,4" /><br /> signal 1 : <input type="number" id="txt1" value="5" /><br /> signal 2 : <input type="number" id="txt2" value="2" /><br /> signal 3 : <input type="number" id="txt3" value="6" /><br /> signal 4 : <input type="number" id="txt4" value="7" /><br /> <input type="button" onclick="return start()" value="Submit" /> <br /> <div class="abc" id="image1" alt="img1">1</div> <div class="abc" id="image2" alt="img2">2</div> <div class="abc" id="image3" alt="img3">3</div> <div class="abc" id="image4" alt="img4">4</div> 

Answer 2

<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>

Here I had also resolved this in some different way