在本教程中，您將學(xué)習(xí)如何使用 JavaScript 隨機更改頁面的背景顏色。您還將學(xué)習(xí)如何使用 HSL 顏色值修改代碼以僅生成柔和的顏色或深色。
讓我們看看我們將要構(gòu)建的內(nèi)容：

在這個演示中，我們每 1500 毫秒更改一次頁面的背景顏色和文本顏色。大部分繁重的工作都是用 JavaScript 完成的，但讓我們看一下內(nèi)容和樣式：

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>
 
對于我們頁面的內(nèi)容，我們將創(chuàng)建一個帶有 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

我們將通過結(jié)合這兩種方法在 JavaScript 中生成隨機顏色：

• HSL 顏色符號，以及
• Math圖書館_

“功能符號根據(jù)其色調(diào)、飽和度和亮度分量表示給定顏色” - MDNhsl()
色調(diào)值最大為 360，表示色輪上顏色位置的程度。飽和度和亮度值最大為 100，分別代表顏色的飽和度和亮度百分比。 

擺弄下面的范圍以查看色相、飽和度和亮度值如何影響顏色的外觀。
為了生成完全隨機的顏色，我們將固定范圍內(nèi)的隨機數(shù)傳遞給三個 HSL 值。我們可以使用Math.random和Math.floor
Math.random生成 0 到 1 之間的隨機數(shù)。我們可以將這些數(shù)字乘以我們指定的范圍，并用于Math.floor向上舍入到最接近的整數(shù)。 
 
然后我們將使用該getRandomNumber函數(shù)為我們的 HSL 符號生成隨機值。
最后，我們將隨機生成的顏色傳遞給我們的背景元素。
這允許我們?yōu)楸尘霸O(shè)置隨機顏色。

應(yīng)用新顏色

onLoad我們可以通過將上述代碼傳遞給一個或一個setInterval函數(shù)來決定是在用戶加載頁面時更改背景顏色還是定期更改背景顏色。