Question

你好我们最近在另一个论坛上找到了这个代码我发现我遇到的唯一问题是试图解释代码实际意味着什么

  var list=["Red.jpg","Amber.jpg","Green.jpg","AmberLast.jpg"];
  var index = 0;

  function changeLights() {
    var image = document.getElementById('Red.jpg');
    var display = document.getElementById('display');
    index = (index + 1) % 4;
    image.src = list[index];
    display.innerHTML = list[index]

感谢您的帮助，我希望我能尽快听到您的答案

<!DOCTYPE html>
<html>
<body>
<h1>Traffic Light Sequence</h1>

<img id="Red.jpg" src="Red.jpg">

<button type="button" onclick="changeLights()">Change Lights</button>

<script>
  var list=["Red.jpg","Amber.jpg","Green.jpg","AmberLast.jpg"];
  var index = 0;

  function changeLights() {
    var image = document.getElementById('Red.jpg');
    var display = document.getElementById('display');
    index = (index + 1) % 4;
    image.src = list[index];
    display.innerHTML = list[index];

  }
</script>

</body>
</html>

这是我的整个代码

Answer 1

var list=["Red.jpg","Amber.jpg","Green.jpg","AmberLast.jpg"];

这是图片来源名称的数组。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

  var index = 0;

这是一个变量，它被称为索引，其值为 0 ，因为您可以定位数组的元素（例如Amber.jpg）使用它的索引。默认情况下，数组的索引从 0 （基于零）开始，因此在＆＃39;列表中＆＃39;上面的数组，索引0（list [0]）将返回＆＃39; Red.jpg＆＃39;。

  function changeLights() {

    var image = document.getElementById('Red.jpg');
    var display = document.getElementById('display');
    index = (index + 1) % 4;
    image.src = list[index];
    display.innerHTML = list[index];

  }

此功能选择ID为＆＃39; Red.jpg＆＃39;的<img>标记，然后将其设置为 index + 1 (= 1) ，然后将ID为显示的元素的内部HTML设置为 Amber.jpg（列表[1]）。

改变灯光的正确方法＆＃39;反而是：

var list=["Red.jpg","Amber.jpg","Green.jpg","AmberLast.jpg"];

var index = 0;

function changeLights() {

   var max = list.length - 1;
   var next = index += 1; 

   if(next > max) {
      next = 0; //start back at beginning
      index = 0;
   }  

   var image = document.getElementById('IDOFIMAGETAG'); //replace will correct ID of <img>

   image.src = list[next];

}

你能帮我解释一下这意味着什么吗？

1 个答案: