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

Question

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

我有 5 个文本框，其中一个文本框定义第一个将哪个按钮设置为绿色的序列。我已经尝试过以下操作，但所有按钮都会在没有时间间隔的情况下变为红色。

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

我想要在 seq 表中将其定义为 1,3,2,4在其他文本框中，1 个图像的时间间隔设置为 5

1. 现在将 1 个图像的时间间隔设置为 5，因此第 1 个图像会将红色图像变为绿色，持续 5 秒

2. 现在，3 个图像的时间间隔设置为 6，因此第 1 个图像将变为红色，第 3 个图像将设置为绿色

3. 现在在 2 个图像中时间间隔设置为 2，因此第 3 个图像将更改为红色，第 2 个图像将设置为绿色

4. 现在 4 个图像的时间间隔设置为 7，因此第 2 个图像将变为红色，第 4 个图像将变为绿色

Answer 1

如果我正确理解了你想要做什么，这应该可以解决问题。

我使用彩色 div 而不是图像，但这应该不重要。

这里的想法是，我们预先计算要在数组中执行的操作，然后使用函数和 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>