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个图像的时间间隔设置为5，这样1个图像将在5秒钟内将红色图像变为绿色
现在将3个图像的时间间隔设置为6，因此将1个图像更改为红色，将3个图像设置为绿色
现在将2个图像的时间间隔设置为2，因此3个图像将变为红色，而2个图像将设置为绿色
现在在4个图像中将时间间隔设置为7，因此2个图像将变为红色，而4个图像将设置为绿色

Answer 1

如果我了解您要正确执行的操作，那么应该可以解决问题。

我正在使用彩色div而不是图像，但这没关系。

这里的想法是，我们预先计算要放入数组中的动作，然后使用函数和setTimeout逐步完成。

archivesBaseName

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

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>

在这里我也以不同的方式解决了这个问题

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

2 个答案: