Question

我正在上一些关于Javascript的在线课程，我遇到了这个挑战。长话短说，挑战的结果是下面的代码。虽然我正确地得到了代码，但我不知道while循环中发生了什么。

/some/path/protected/mycoolflix.mp4

我会给代码添加一个链接，但是Jsfiddle不允许我使用document.write。结果是10个彩色圆圈，每次刷新页面时都会改变颜色。

我的问题是：

为什么页面上有10个div而html代码中没有？
为什么我们将Math.random乘以256？

这两行代码的含义是什么？

     var html = '';
      var red;
      var green;
      var blue;
      var rgbColor;

      var counter = 0;

      while (counter <10) {

      red = Math.floor(Math.random() * 256 );
      green = Math.floor(Math.random() * 256 );
      blue = Math.floor(Math.random() * 256 );
      rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
      html += '<div style="background-color:' + rgbColor + '"></div>';

      counter +=1;
    }


 document.write(html);

我看到字符串和数字连接，我不知道它们甚至是可能的。

Answer 1

rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';创建一个字符串，表示在循环迭代期间随机生成的rgb值。
每次循环运行时，html += '<div style="background-color:' + rgbColor + '"></div>';都会将一个圆圈div添加到变量中。
在你离开循环之后，document.write(html);将你生成的所有圆形div（总共有10个因为循环运行10次）写入页面，使它们可见。
您乘以256，因为Math.random生成介于0和1之间的内容。然后，floor()方法截断小数部分，留下0到256之间的整数.RGB值组成从0到256的3个值。

希望这会帮助你！

Answer 2

你去了：

你有一个运行10次的while循环为你生成10个div，它是如何创建一个div代码的html代码。
Math.random（）生成0到1之间的随机数，乘以256将数字转换为颜色代码，计算机中的颜色使用6位十六进制代码表示，即FFFFFF，其中第一个FF代表红色部分，第二个ff代表绿色的部分，第三个FF代表绿色。 FFFFFF为白色，000000为黑色。
rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')'是html的颜色表示语法。

仅当您执行document.write（html）;

所以在循环结束时，你的代码将有10个div相互附加，以生成有效的HTML代码。

Answer 3

解释很简单：

//These are variables you're declaring
var html = ''; // empty string
var red;
var green;
var blue;
var rgbColor;
var counter = 0; // number 0
//While the value of counter is less then 10 continue looping
while (counter <10) {
      //Here are 3 colors represents RED, GREEN BLUE, Math.random returns a float number from 0 to 1
      red = Math.floor(Math.random() * 256 );
      green = Math.floor(Math.random() * 256 );
      blue = Math.floor(Math.random() * 256 );
      //After calculating the colors we concat it to a string with RGB properties
      rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
      //Then create the html the div
      html += '<div style="background-color:' + rgbColor + '"></div>';

      counter +=1;
    }
//And then render the code transforming into html
document.write(html);

如果您在执行后查看源代码，那么Html将使用write进行渲染，您将看到在文档中呈现的html中的那些div。事情是创建10个圆圈，随机播放RGB位颜色，希望它有所帮助。

Answer 4

RGB是一种允许表示颜色的颜色模型。它由三个值R，G，B组成，范围从0到256.当您将Math.random乘以256时，您将获得此间隔中的值（Math.random生成介于0和1之间的值，乘以256 - ＆gt; 0到256之间的随机值）。你可以使用红色，蓝色和绿色来获得随机颜色。
您将三个生成的值（红色，蓝色和绿色）放在一起并获得随机颜色。

示例：

rgb（248,248,8） - ＆gt;黄

更多信息：w3schools - HTML colors

Answer 5

代码以声明变量

开始

var html = '';
var red;
var green;
var blue;
var rgbColor;
var counter = 0;

html变量初始化为空字符串。并且计数器变量初始化为零值

然后我们进入while循环

while (counter <10) {

当计数器小于10时，保持循环。

在代码块的末尾，我们有

counter +=1;

+=符号是获取变量当前值的简写，并将右侧的内容添加到其中。它相当于counter = counter + 1。自从我们开始0后，我们将循环10次。我们可以在下面计算条件为真10次并在10<10

的情况下退出

while (0 <10) TRUE
while (1 <10) TRUE
while (2 <10) TRUE
while (3 <10) TRUE
while (4 <10) TRUE
while (5 <10) TRUE
while (6 <10) TRUE
while (7 <10) TRUE
while (8 <10) TRUE
while (9 <10) TRUE
while (10 <10) FALSE

Math.random返回0（包括）和1（不包括）之间的数字。将它乘以256并取Math.floor将返回0到255之间的数字。我们必须做256，因为随机生成器中的1是独占的，不包括在结果中。因此，以下行将红色，绿色，蓝色设置为0到255之间的数字。

red = Math.floor(Math.random() * 256 );
green = Math.floor(Math.random() * 256 );
blue = Math.floor(Math.random() * 256 );

由于此代码块在while循环中，因此每次迭代都会将其设置为随机数。

在javascript中，重载的+运算符可以根据操作数执行不同的操作。在string + number的情况下，它会将数字连接到字符串

rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';

正如我们之前所说的那样，红色，绿色和蓝色将是0到255之间的随机数。因此连接看起来像这样：

rgbColor = 'rgb(' + 45 + ',' + 156 + ',' + 34 + ')';

所有组合将是字符串：

rgbColor = 'rgb(45,156,34)';

此行再次是+=的示例，因此它将获取html的值并向其添加另一个字符串

html += '<div style="background-color:' + rgbColor + '"></div>';

鉴于我们之前的价值观将转变为：

html += '<div style="background-color:rgb(45,156,34)"></div>';

这将创建一个带有HTML标记的字符串，其中div将background-color css属性设置为随机颜色。鉴于我们在循环之前初始化html vairable并且我们使用+=来构建字符串，它将是一个包含10个div元素的字符串，所有元素都具有随机颜色。

document.write写入打开的文档流，即首次呈现页面时。这里主要关注的是，如果我们在页面加载后调用document.write，它将清除文档

document.write(html);

当这一行被击中时，循环已被执行，我们有字符串html，现在有10个具有随机背景颜色的div元素。该字符串将写入文档。查看渲染源将显示这些div元素。

有人可以解释这个Javascript代码/挑战吗？

5 个答案: