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

在這個(gè)演示中，我們每 1500 毫秒更改一次頁(yè)面的背景顏色和文本顏色。大部分繁重的工作都是用 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 生成隨機(jī)背景顏色</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>
 
對(duì)于我們頁(yè)面的內(nèi)容，我們將創(chuàng)建一個(gè)帶有 id 的元素background并在其中放入一些文本。

CSS

我們將使用 CSS 來(lái)控制background-color過(guò)渡，使變化看起來(lái)更平滑。
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">主要的 {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  過(guò)渡：背景1s；</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
}</font></font>

JavaScript

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

• HSL 顏色符號(hào)，以及
• Math圖書館_

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

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

應(yīng)用新顏色

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