Question

我已经在这个交通灯代码上工作了几个星期了，我终于用一套定时器自动工作了。但是，现在我想通过给出阵列中的每个图像一个特定的时间来使其更加真实，例如绿灯亮5秒，黄灯亮3等等。

当前代码：

＆＃13;

var list = ["only red1.jpg","red-yellow 2.jpg", "green3.jpg","yellowonly4.jpg"];
    var nextlight = 0;
    var timer;
    function ChangeLight() {
      nextlight = nextlight + 1;      
      if (nextlight == list.length) 
        nextlight = 0;      
      var firstlight = document.getElementById('traffic');     
      firstlight.src = list[nextlight]; 
    } 


     timer = setInterval(ChangeLight,1000);

＆＃13;

<!DOCTYPE html> 
<html> 
<body>  
  
  <h1>JavaScript Code</h1> 
  <p>Traffic Light</p> 
  
<img id="traffic" src="only red1.jpg">
  <button type="button" onclick="ChangeLight()">Change Light</button>   
</body> 
</html>

＆＃13;

我是一个javascript新手，所以请不要复杂的代码，谢谢你的帮助。

Answer 1

您需要更改数据结构，使用image src保持延迟设置并使用setTimeout而不是setInterval来计划以递归方式执行函数延迟。

var list = [{
  src: "only red1.jpg",
  interval: 10000
}, {
  src: "red-yellow 2.jpg",
  interval: 5000
}, {
  src: "green3.jpg",
  interval: 3000
}, {
  src: "yellowonly4.jpg",
  interval: 1000
}];

var nextlight = 0;
var timer;

function ChangeLight() {  
  var firstlight = document.getElementById('traffic');
  var obj = list[nextlight];
  firstlight.src = obj.src;
  firstlight.alt = obj.src;
  timer = setTimeout(ChangeLight, obj.interval);
  nextlight = nextlight + 1;
  if (nextlight == list.length)
    nextlight = 0;
}

ChangeLight();

<h1>JavaScript Code</h1>
<p>Traffic Light</p>

<img id="traffic" src="only red1.jpg">
<button type="button" onclick="ChangeLight()">Change Light</button>

Answer 2

您可以将灯光更改为objects，并在其中加入计时器。

＆＃13;

var list = [
  {
    img: "only red1.jpg", 
    timer: 1000
  },
  {
    img: "red-yellow 2.jpg", 
    timer: 2000
  },
  {
    img: "green3.jpg", 
    timer: 3000
  },
  {
    img: "yellowonly4.jpg", 
    timer: 4000
  }
];

var nextlight = 0;
var timer;

function ChangeLight() {
  nextlight = nextlight + 1;
  if (nextlight == list.length)
    nextlight = 0;
  var firstlight = document.getElementById('traffic');
  var light = list[nextlight];
  console.log(light.img + ' lit for ' + light.timer + ' ms');
  setTimeout(ChangeLight, light.timer);
  //firstlight.src = list[nextlight];
}

ChangeLight();

＆＃13;

Answer 3

使用setTimeout代替setInterval，在处理函数中，根据当前信号更改duration的值

var list = ["only red1.jpg", "red-yellow 2.jpg", "green3.jpg", "yellowonly4.jpg"];
var nextlight = 0;
var elem = document.getElementById('result');

function ChangeLight() {
  nextlight = nextlight + 1;
  if (nextlight == list.length)
    nextlight = 0;
  var firstlight = document.getElementById('traffic');
  firstlight.src = list[nextlight];
  elem.textContent = list[nextlight];
  var setTimeoutDuration = 0;
  if (list[nextlight].indexOf('green') > -1) {
    setTimeoutDuration = 5;
  } else if (list[nextlight].indexOf('yellow') > -1) {
    setTimeoutDuration = 3;
  } else if (list[nextlight].indexOf('red') > -1) {
    setTimeoutDuration = 2;
  } else {
    setTimeoutDuration = 1;
  }
  setTimeout(ChangeLight, setTimeoutDuration * 1000);
}

<h1>JavaScript Code</h1>
<p>Traffic Light</p>

<img id="traffic" src="only red1.jpg">
<div id="result"></div>
<button type="button" onclick="ChangeLight()">Change Light</button>

Answer 4

使用文件名和持续时间使数组成为2D。在函数中，使用setTimeout在从数组中获取的持续时间内调用自身。

检查代码。（设置ALT属性以显示更改）。

＆＃13;

var list = [["only red1.jpg",3],["red-yellow 2.jpg",4],[ "green3.jpg",5],["yellowonly4.jpg",6]];
    var nextlight = 0;
    var timer;
    function ChangeLight() {
      nextlight = nextlight + 1;      
      if (nextlight == list.length) 
        nextlight = 0;      
      var firstlight = document.getElementById('traffic');     
      firstlight.src = list[nextlight][0]; 
      firstlight.setAttribute('alt',list[nextlight][0]);
      setTimeout(ChangeLight,list[nextlight][1]*1000);
    }

＆＃13;

<!DOCTYPE html> 
<html> 
<body>  
  
  <h1>JavaScript Code</h1> 
  <p>Traffic Light</p> 
  
<img id="traffic" src="only red1.jpg">
  <button type="button" onclick="ChangeLight()">Change Light</button>   
</body> 
</html>

＆＃13;

如何为特定图像添加不同的计时器？

4 个答案: