有關(guān)使用JavaScript創(chuàng)建隨機(jī)顏色生成器的分步指南。

　　如果你是JavaScript的新手，你可能已經(jīng)學(xué)到了很多關(guān)于數(shù)據(jù)類型、邏輯、函數(shù)等如何工作的知識(shí)。這很好;要有朝一日在更復(fù)雜的項(xiàng)目中使用JS，你需要從基礎(chǔ)開始。但是，根據(jù)您的注意力范圍，您可能很快就會(huì)開始強(qiáng)烈希望將您的JS技能用于實(shí)際網(wǎng)站。這樣做可能有點(diǎn)復(fù)雜(但不像正則表達(dá)式，amirite那么復(fù)雜)，但是你可以從更簡(jiǎn)單的一個(gè)開始，你猜對(duì)了，一個(gè)隨機(jī)顏色生成器。在本文中，我將向您介紹我自己構(gòu)建一個(gè)步驟。

　　1. 添加樣板 HTML

　　樣板 HTML，鏈接樣式表

　　如果您使用的是 VS Code，則可以在空的 HTML 文檔中鍵入 ! ，然后按 Enter 添加此部分(不確定其他文本編輯器)，如果您還不知道這一點(diǎn)。在樣板下方，我添加了指向用于此項(xiàng)目的CSS文檔的鏈接。我建議將CSS保存在一個(gè)單獨(dú)的文件中，這樣你的HTML文件就不會(huì)變得太大/太復(fù)雜。由于我們將編寫的 JavaScript 不是很長(zhǎng)，因此我將直接將其添加到 標(biāo)記內(nèi)的 HTML 文件中，您將在步驟 3 中看到。如果你想有一個(gè)單獨(dú)的JS文件并將其鏈接到你的HTML文件，你可以這樣做：

　　鏈接一個(gè)單獨(dú)的 JS 文件，主.js

　　2. 構(gòu)建 HTML“骨架”

　　構(gòu)建 HTML“骨架”

　　現(xiàn)在我們已經(jīng)添加了樣板 HTML > 鏈接了 CSS 文檔，讓我們添加正文 & 構(gòu)建我們的 HTML。如您所見，該函數(shù)將在頁面加載時(shí)運(yùn)行。有關(guān)此功能的詳細(xì)信息，請(qǐng)參閱以下步驟。getNewColor()

　　在上圖中，我添加了一個(gè) ，其中包含幾個(gè)標(biāo)頭，讓用戶知道他們?cè)谀睦?amp;做什么。然后，我添加另一個(gè) ，其中包含一個(gè)標(biāo)記，該標(biāo)記最終將填充十六進(jìn)制代碼，并將在頁面上顯示為文本。接下來，我插入一個(gè)按鈕，用戶單擊該按鈕以生成新的十六進(jìn)制代碼。這是由函數(shù)完成的，我很快就會(huì)解釋。

　　3. 添加腳本!

　　現(xiàn)在我們正處在真正的魔法開始發(fā)生的地步。你興奮嗎?我看得出來。這是你如何做到這一點(diǎn)：

　　將 JS 添加到文檔

　　對(duì)于像這樣相對(duì)簡(jiǎn)單的程序，我們只需要一個(gè)函數(shù)即可完成所需的操作，即上述函數(shù)。對(duì)于此生成器，讓我們使用十六進(jìn)制代碼來確定顏色，但也可以使用 RGB 值。getNewColor()

　　讓我們首先將所有可能的十六進(jìn)制字符(整數(shù) 0–9 和字母 A-F)以字符串的形式放入名為 的變量中。symbols

　　然后，讓我們使用字符串形式的哈希標(biāo)記初始化變量。此變量將在下面描述的循環(huán)中發(fā)生突變。color

　　現(xiàn)在讓我們創(chuàng)建一個(gè)運(yùn)行 6 次的循環(huán)，因?yàn)?HEX 代碼中有 6 個(gè)值。對(duì)于每個(gè)循環(huán)迭代，字符串中的單個(gè)隨機(jī)值將添加到變量中，如果您還記得，該變量以字符串形式以 # 開頭。此時(shí)，每當(dāng)我們調(diào)用 ，我們都會(huì)得到一個(gè)新的十六進(jìn)制代碼。現(xiàn)在，讓我們將該代碼應(yīng)用于我們的 HTML 頁面。symbolscolorgetNewColor()

　　4. 將 JS 應(yīng)用于

　　很酷，我們現(xiàn)在有一個(gè)函數(shù)，可以給我們一個(gè)隨機(jī)的十六進(jìn)制代碼。但是，除非我們將其應(yīng)用于HTML，否則這是無用的。在這種情況下，最好更改整個(gè)頁面的背景，以便用戶可以預(yù)覽隨機(jī)顏色，并將十六進(jìn)制代碼以文本格式放置，以便他們可以復(fù)制它。我們首先需要在函數(shù)中定義這些行為：

　　仍然在函數(shù)內(nèi)部運(yùn)行，我們可以使用您在上圖中看到的第一行代碼訪問 styling 屬性。我們也可以使用 ，順便說一句，它可以在CSS中翻譯。在此步驟中，我們將變量(我們?cè)谘h(huán)中隨機(jī)定義)設(shè)置為頁面的背景色。getNewColor()backgroundbackgroundColorbackground-colorcolor

　　在第二行代碼中，我們通過 id “hex” 訪問先前定義的標(biāo)記。要以文本形式添加變量，我們可以使用我在這里使用的方法，或者方法，附加到標(biāo)記中。請(qǐng)參閱本文末尾的鏈接，以了解有關(guān)它們之間差異的更多信息。按照我們上面布局HTML的方式，此文本將直接顯示在按鈕上方，以便用戶可以看到顯示的確切顏色并根據(jù)需要復(fù)制它。color.textContent.innerHTMLcolor

　　總而言之，我們的 JS 如下所示：

　　5. 告訴程序何時(shí)運(yùn)行函數(shù)

　　如果我們從不運(yùn)行函數(shù)，那么創(chuàng)建函數(shù)是沒有意義的，所以現(xiàn)在讓我們告訴我們的程序什么時(shí)候應(yīng)該調(diào)用我們的函數(shù)。在這種情況下，讓我們?cè)陧撁婕虞d時(shí)運(yùn)行，然后單擊“獲取新顏色!”按鈕。我們是這樣做的：getNewColor()getNewColor()

　　加載頁面時(shí)運(yùn)行函數(shù)

　　單擊按鈕時(shí)運(yùn)行函數(shù)

　　6. 添加樣式

　　您可以按照自己的意愿或根本不做這部分，但這是我在此項(xiàng)目中使用的樣式，左側(cè)為樣式.css為響應(yīng)式.css右側(cè)：