Question

我目前正在进行受控评估，几乎已经完成但有一个问题，我真的不知道。

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

Answer 1

带有阵列的简单交通灯序列可以按如下方式完成：

定义一个数组让我们说var trafficLight = [ ＆＃39;红色＆＃39 ;, ＆＃39;红色＆＃39 ;, ＆＃39;黄色＆＃39 ;, ＆＃39;黄色＆＃39 ;, ＆＃39;绿色＆＃39 ;, ＆＃39;绿色＆＃39; ];

将该数组中的每个元素视为交通信号灯在该特定颜色上花费的时间段。所以想象它是秒，红色2秒，黄色2，绿色2。您可以通过循环遍历数组来模拟这一点。制作一个颜色的持有人，只是一个简单的div。将其默认背景颜色设置为白色。

现在遍历数组并为每次迭代设置颜色，如下所示：

for(var x=0; x<=trafficLight.length; x++
{
$('myTrafficLightHolder).css('background-color', ''+trafficLight[x]);

}

它现在应该循环遍历数组，保持红色2次迭代，然后黄色2，然后绿色2。显然它会移动得非常快，你可以使用CSS动画或其他东西减速过渡。我没有测试过，但它应该可以工作。

Answer 2

我建议使用Array.prototype.push（）（在本例中，它将是colour.push（））;而不是通过指定索引添加数组元素;

有关push（）的更多信息，请参阅http://www.w3schools.com/jsref/jsref_push.asp。

而且，由于p标签将始终包含图像，我建议放置＆＃34; img＆＃34;标签里面的＆＃34; p＆＃34;标记为id＆＃34; image＆＃34;并使用（我们需要为新创建的图像标签提供＆＃34;图像＆＃34;以及从p标签中删除id）。

plot  for [k=2:20] 'test.txt'  u 1:k notitle w lines linecolor "row 10 of column(k)"

而不是像下面那样操纵p标签的内部html。

document.getElementById("image").src = colour[index];

下面，我在下面的代码中添加了其他评论

document.getElementById("image").innerHTML = colour[index];

如果您需要更改img的宽度，可以使用以下代码

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

同样适用于操纵高度和高度。只需替换宽度并用高度和alt替换它。

Answer 3

嗯，对于红绿灯，你需要三种颜色。所以你需要一个长度为3的数组，这意味着你有索引：0,1和2.如何分配颜色是你的工作（从上到下或从下到上），但是黄色/橙色总是在中间（索引1）。所以结构看起来应该是这样的：

ID Phenotype SNP1 SNP2 SNP3 .....SNP100
NA  NA        0.1  0.5  0.2       0.3
 1  1         0    2    1          0
 2  1         0    0    1          2

数组的JavaScript结构

3 个答案: