在本教程中，您將學習如何使用 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函數來決定是在用戶加載頁面時更改背景顏色還是定期更改背景顏色。