前端制作之如何使用 JavaScript 生成随机背景颜色

在本教程中，您将学习如何使用 JavaScript 随机更改页面的背景颜色。您还将学习如何使用 HSL 颜色值修改代码以仅生成柔和的颜色或深色。
让我们看看我们将要构建的内容：

在这个演示中，我们每 1500 毫秒更改一次页面的背景颜色和文本颜色。大部分繁重的工作都是用 JavaScript 完成的，但让我们看一下内容和样式：

HTML

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><main id="背景"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  <h1></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
使用 JavaScript 生成随机背景颜色</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
 
  </h1></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
</main></font></font>
 
对于我们页面的内容，我们将创建一个带有 id 的元素background并在其中放入一些文本。

CSS

我们将使用 CSS 来控制background-color过渡，使变化看起来更平滑。
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">主要的 {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  过渡：背景1s；</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
}</font></font>

JavaScript

我们将通过结合这两种方法在 JavaScript 中生成随机颜色：

• HSL 颜色符号，以及
• Math图书馆_

“功能符号根据其色调、饱和度和亮度分量表示给定颜色” - MDNhsl()
色调值最大为 360，表示色轮上颜色位置的程度。饱和度和亮度值最大为 100，分别代表颜色的饱和度和亮度百分比。 

摆弄下面的范围以查看色相、饱和度和亮度值如何影响颜色的外观。
为了生成完全随机的颜色，我们将固定范围内的随机数传递给三个 HSL 值。我们可以使用Math.random和Math.floor
Math.random生成 0 到 1 之间的随机数。我们可以将这些数字乘以我们指定的范围，并用于Math.floor向上舍入到最接近的整数。 
 
然后我们将使用该getRandomNumber函数为我们的 HSL 符号生成随机值。
最后，我们将随机生成的颜色传递给我们的背景元素。
这允许我们为背景设置随机颜色。

应用新颜色

onLoad我们可以通过将上述代码传递给一个或一个setInterval函数来决定是在用户加载页面时更改背景颜色还是定期更改背景颜色。