我目前正在进行我的控制评估，几乎已经完成，但有一个问题，我真的没有。
（iii）描述可用于处理交通灯序列的阵列结构。
我已经搜遍了所有我得到的是过于复杂的代码和解释。
（iii）之后的任务要求我创建一个代码，但使用我在（iii）中描述的数组结构。
有人可以解释我使用的数组结构或一般的数组结构及其工作原理吗？
谢谢
这是我目前为整个任务编写的代码/
<!DOCTYPE html>
<html>
<head>
<title>Animated Traffic Light</title>
<script>
window.onload = function()
{
document.getElementById("image").innerHTML = colour[0]
}
var index = 0
var colour = [];
colour[0] = '<img src="../Assets/TrafficLightGreen.png" width="254" height="501" alt="Traffic Light Red 1">';
colour[1] = '<img src="../Assets/TrafficLightRed.png" width="249" height="494" alt="Traffic Light Yellow">';
colour[2] = '<img src="../Assets/TrafficLightYellow.png" width="243" height="506" alt="Traffic Light Green">';
function changeLight()
{
index++;
if (index == colour.length)
{
index = 0
}
document.getElementById("image").innerHTML = colour[index];
}
</script>
</head>
<body>
<p>
<p id="image"></p>
<p>
<input type="Button" id="button" value="Change Lights" onclick="changeLight()" />
</p>
</p>
</body>
具有阵列的简单交通灯序列可以如下完成：
定义一个数组让我们说var trafficLight = ['red'，'red'，'yellow'，'yellow'，'green'，'green'];
将该数组中的每个元素视为交通信号灯在该特定颜色上花费的时间段。所以想象它是秒，红色2秒，黄色2，绿色2。您可以通过循环遍历数组来模拟这一点。制作一个颜色的持有人，只是一个简单的div。将其默认背景颜色设置为白色。
现在遍历数组并为每次迭代设置颜色，如下所示：
for(var x=0; x<=trafficLight.length; x++
{
$('myTrafficLightHolder).css('background-color', ''+trafficLight[x]);
}
它现在应该循环遍历数组，保持红色2次迭代，然后黄色2，然后绿色2。显然它会移动非常快，你可以使用CSS动画或其他东西来减缓过渡。我没有测试过，但它应该可以工作。
我建议不要通过指定索引来添加数组元素，而是使用Array.prototype.push（）（在本例中，它将是colour.push（））;
有关push（）的更多信息，请参阅http://www.w3schools.com/jsref/jsref_push.asp。
而且，由于p标签将始终包含图像，我建议将“img”标签放在“p”标签内，并使用id“image”并使用（我们需要为新创建的图像标签提供id “image”并从p标签中删除id）。
document.getElementById("image").src = colour[index];
而不是像下面那样操纵p标签的内部html。
document.getElementById("image").innerHTML = colour[index];
下面，我在下面的代码中附加了其他评论
<!DOCTYPE html>
<html>
<head>
<title>Animated Traffic Light</title>
<script>
// When the window loads, run the function
window.onload = function()
{ // Get the dom object of the p tag with id "image". set the innerHTML to
// colour[0]. the p tag should now look like this
// <p id="image">
// <img src="../Assets/TrafficLightGreen.png" width="254" height="501" alt="Traffic Light Red 1">'
// </p>
document.getElementById("image").innerHTML = colour[0]
}
var index = 0
var colour = []; // declare new array.
colour[0] = '<img src="../Assets/TrafficLightGreen.png" width="254" height="501" alt="Traffic Light Red 1">';
colour[1] = '<img src="../Assets/TrafficLightRed.png" width="249" height="494" alt="Traffic Light Yellow">';
colour[2] = '<img src="../Assets/TrafficLightYellow.png" width="243" height="506" alt="Traffic Light Green">';
// Instead of using colour[1], colour[2], etc. I recommend using colour.push()
// When the button is clicked, this function will run
function changeLight()
{
index++
if (index == colour.length) // if index becomes 3, reset index to 0 to go to the start of the colour array.
{index = 0}
document.getElementById("image").innerHTML = colour[index]; // set the innerHTML of the image (it will keep changing images, since index is incremented per click
}
</script>
</head>
<body>
<p>
<p id="image"></p>
<p>
<input type="Button" id="button" value="Change Lights" onclick="changeLight()" />
</p>
</body>
</html>
如果您需要更改img的宽度，可以使用以下代码
document.getElementById("image").width = "300";
操纵高度和高度也是如此。只需替换宽度并用高度和alt替换它。
那么，对于红绿灯，你需要三种颜色。所以你需要一个长度为3的数组，这意味着你有索引：0,1和2.如何分配颜色是你的工作（从上到下或从下到上），但是黄色/橙色总是在中间（索引1）。所以结构看起来应该是这样的：
var trafficLight = [
'red',
'yellow',
'green'
];