Question

这段代码我的工作范围很广;它变化但很快，我希望它在3秒左右后改变，但我不知道如何。提前谢谢！

CODE：

<img id = "theImage" src="red.jpg" alt="HTML5 Icon" style="width:250px;height:500px;" align = left>

<script>
var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"];
var place = 0;

setInterval(change_light,1);
function change_light() {
  place += 1;
  if (place > sequence.length -1) {
    place = 0;
  }
  document.getElementById('theImage').src = sequence[place];
}

Answer 1

您应该在setInterval期间使用毫秒。请试试这个。我也简化了你的条件：

var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"];
var place = 0;
var frameInterval = 1000; // milliseconds

setInterval(change_light, frameInterval);
function change_light() {
  place++;
  place = place % sequence.length;
  document.getElementById('theImage').src = sequence[place];
}

Answer 2

setInterval要求您传递毫秒数（而不是秒数）

像这样使用：setInterval(change_light,3000);

Answer 3

很简单，你做的一切都很对！只是一个微小的变化：函数 setInterval（change_light，3000）; 应该以毫秒为单位接收它的时间，而不是以秒为单位。

并且我还建议在setInterval中添加一些返回值，然后如果想要使用，则可以清除此计时器：

clearInterval(change_light_id);

这是您的固定代码：

<img id = "theImage" src="red.jpg" alt="HTML5 Icon" style="width:250px;height:500px;" align = left>

<script>
var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"];
var place = 0;

change_light_id = setInterval(change_light,3000);

function change_light() {
  console.log(1);
  place += 1;
  if (place > sequence.length -1) {
    place = 0;
  }
  document.getElementById('theImage').src = sequence[place];
}
</script>

HTML [JAVASCRIPT]中的图像会在几秒钟之后发生变化

3 个答案: