需要了解 for 循环在下面的 The Color Flipper 代码中是如何工作的

Question

Code : 

const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
const btn = document.getElementById("btn");
const color = document.querySelector(".color");

btn.addEventListener("click", function () {
  let hexColor = "#";
  for (let i = 0; i < 6; i++) {
    hexColor += hex[getRandomNumber()];
    console.log(hexColor);
    color.textContent = hexColor;
    document.body.style.backgroundColor = hexColor;
  }
});

function getRandomNumber() {
  return Math.floor(Math.random() * hex.length);
}

这里我无法理解for循环是如何实现的运行。 for 循环如何与 getRandomNumber() 函数建立连接。有人可以逐步解释关于此代码的 for 循环是如何运行的吗？

谢谢

Answer 1

getRandomNumberFunction returns 十六进制变量的随机值，如您在此处所见

function getRandomNumber() {
  return Math.floor(Math.random() * hex.length); // this returns a random number based on the length of the hex which is 16 it will choose from 0-15
}

然后将获取的值附加到变量 hexColor 中，该变量最初用“#”赋值

   hexColor += hex[getRandomNumber()]; // initial value "#" + "hex[0-15] random digit"

在代码的末尾，它看起来像这样的十六进制代码 #32a856 因为它只会运行 6 圈然后将被设置为body 元素的背景颜色

Answer 2

在 getRandomNumber() 中发生的事情是每当函数被调用时，它都会生成一个介于 0-15 之间的随机数（这是数组的长度 hex[]）

有关 JavaScript 数学的更多信息 here

对于它在 for 循环中的使用方式：

for (let i = 0; i < 6; i++)

let i = 0 我们最初定义变量 i 并以 0 作为它的值。
i < 6 这是循环的条件。这意味着当此条件为 true 时，循环内的代码将 re-run 直到变为 false.
i++ 这就像循环的 'do' 部分。因此，只要满足条件，这就是将对我们最初定义的变量执行的操作。在这种情况下，值 i 递增 (++)/i=i+1.
当循环发生时，hexColor 与数组 hex[]
中的随机值连接
```
hexColor += hex[getRandomNumber()];
```

例如：

If function getRandomNumber() output is = 11. Then, hex[getRandomNumber()] output is = hex[11]. In which hex[11] = "B". Therefore hexColor becomes #B - This gets repeated six (6) times until the 6 characters are completed. Sample output
Loop 1: #B
Loop 2: #B3 ... so on

但是在您提供的代码中，以下几行：

color.textContent = hexColor;
document.body.style.backgroundColor = hexColor;

在 for 循环内。这意味着 color.textContent 和 document.body.style.backgroundColor 被设置了 6 次。哪个不应该，只要循环完成就应该设置它。

这是一个代码示例，我将上述行移到循环之外，因此一旦 hexColor/循环完成，它就会更改 color.textContent 和 document.body.style.backgroundColor。

const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
        const btn = document.getElementById("btn");
        
        btn.addEventListener("click", function () {
          let hexColor = "#";
          for (let i = 0; i < 6; i++) {
            hexColor += hex[getRandomNumber()];
          }
          document.getElementById('color').innerHTML = hexColor;
          document.body.style.backgroundColor = hexColor;
        });
        
        function getRandomNumber() {
          return Math.floor(Math.random() * hex.length);
        }

<html>
  <body>
    <p style="font-size:48px">Color (hexColor) value: <span id="color"></span> </p>
    <button id="btn" style="padding: 20px;">Get Random Color</button> 
  </body>
</html>

希望对您有所帮助！

Answer 3

这里有很多详细的答案，但是，因为你的问题是关于 for 循环的。

以下表示它将调用 getRandomNumber() 6 次，因此它将从您的 hex 数组中放置随机字符，形成 6 字符长字符串（例如#847ABC）

let stringToBeCreated = '';
for (let i = 0; i < 6; i++) {
   console.log('value of i', i);
   stringToBeCreated += i; // this is replaced by your randomNumber and hex array
}

console.log('string created', stringToBeCreated)

需要了解 for 循环在下面的 The Color Flipper 代码中是如何工作的

Need to understand how for loop is working in the The Color Flipper code below

javascript

for-loop

function