首頁 >web前端 >js教程 >讓我們創建一個隨機顏色產生器！

讓我們創建一個隨機顏色產生器！

Barbara Streisand原創: 2025-01-14 09:54:42442瀏覽

Let’s Create a Random-Color Generator!

如果您是 JavaScript 新手，您可能已經了解了很多關於資料類型、邏輯、函數等如何運作的知識。這很好；有一天，要在更複雜的專案中使用 JS，您需要從基礎知識開始。然而，根據您的注意力持續時間，您可能很快就會開始強烈渴望將您的 JS 技能運用到實際的網站上。這樣做可能有點複雜（但不像正規表示式、amirite 那麼複雜），但你可以從一個更簡單的開始，你猜對了，隨機顏色產生器。在這篇文章中，我將帶您完成我自己建立一個的步驟。

1. 新增樣板 HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA=Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random-Color Generator</title>

  <!--Link stylesheets-->
  <link rel="stylesheet" href="./styling.css">
  <link rel="stylesheet" href="./responsive.css">
</head>

如果您使用的是VS Code，則可以輸入「!」到空的HTML 文件中，然後按「Enter」新增此部分（不確定其他文字編輯器是否如此）（如果您還不知道的話）。在樣板文件下方，我新增了用於該專案的 CSS 文件的連結。我建議將 CSS 保存在單獨的文件中，這樣您的 HTML 文件就不會變得太大和複雜。由於我們要編寫的 JavaScript 不是很長，因此我將其直接添加到 <script> 內的 HTML 檔案中。標籤，您將在步驟 3 中看到該標籤。如果您想要一個單獨的 JS 文件並將其連結到您的 HTML 文件，您可以這樣做：<br> </script>

<script type="text/javascript" src="main.js"></script>

2. 建構 HTML“骨架”

<body onload="getNewColor()">
  <div>



<p>Now that we’ve added the boilerplate HTML & linked our CSS documents in the <head>, let’s add the body & build out our HTML. As you can see, the getNewColor() function will run whenever the page loads. More on this function in the following steps.</p>

<p>In the picture above, I add a <div>, which contains a couple of headers, letting the user know where they are & what to do. I then add another <div>, which contains a <span> tag, which will eventually be populated with a HEX code and will display as text on the page. Next, I insert a button that the user clicks to generate a new HEX code. This is done by the getNewColor() function, which I will explain soon.</p>

<h2>
  
  
  3. Add JavaScript!
</h2>

<p>Now we are at the point where the real magic starts to happen. Are you excited? I can tell. Here’s how you do that:<br>
</p>

<pre class="brush:php;toolbar:false"><script>
  function getNewColor() {
    let symbols = "0123456789ABCDEF";
    let color = "#";

對於像這樣相對簡單的程序，我們只需使用一個函數即可完成我們需要的工作，即前面提到的 getNewColor() 函數。對於這個生成器，我們使用十六進位代碼來確定顏色，但使用 RGB 值也是可以的。

我們首先將所有可能的十六進位字元（整數 0-9 和字母 A-F）以字串的形式放入名為「symbols」的變數中。

然後，讓我們用字串形式的雜湊標記來初始化顏色變數。該變數將在下面描述的循環中發生變化。

現在讓我們建立一個運行 6 次的循環，因為十六進位程式碼中有 6 個值。對於每次循環迭代，符號字串中的單一隨機值都會新增到變數 color 中，如果您還記得的話，該值以字串形式以 # 開頭。此時，每當我們呼叫 getNewColor() 時，我們都會得到一個新的十六進位程式碼。現在，讓我們將該程式碼套用到 HTML 頁面。

根據我的經驗，最好將 <script> 放在<body> 末尾的標籤標籤。有些人會強烈反對，他們可能有道理，但我不打算在本文中討論這一點。如果您願意，請在下面的評論部分進行鍵盤大戰，因為這有利於參與。 </script>

4.將JS應用到HTML文件

酷，我們現在有一個函數可以提供我們隨機的十六進位代碼。然而，除非我們將其應用到 HTML 中，否則這是沒有用的。在這種情況下，最好更改整個頁面的背景，以便使用者可以預覽隨機顏色，並將十六進位程式碼放入文字格式，以便他們可以複製它。我們首先需要在函數中定義這些行為：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA=Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random-Color Generator</title>

  <!--Link stylesheets-->
  <link rel="stylesheet" href="./styling.css">
  <link rel="stylesheet" href="./responsive.css">
</head>

仍然在 getNewColor() 函數內操作，我們可以使用上圖中看到的第一行程式碼來存取背景樣式屬性。我們也可以使用backgroundColor，順便說一下，它在CSS 中轉換為背景顏色。在此步驟中，我們將在循環中隨機定義的變數顏色設定為頁面的背景顏色。

在第二行程式碼中，我們存取先前定義的按其 ID「十六進位」標記。要以文字形式新增可變顏色，我們可以使用我在這裡使用的方法 .textContent 或 .innerHTML 方法，將顏色附加到中。標籤。請參閱本文末尾的鏈接，以了解有關它們之間差異的更多資訊。按照我們上面佈置 HTML 的方式，此文字將直接顯示在按鈕上方，以便使用者可以看到顯示的確切顏色並根據需要複製它。

總而言之，我們的 JS 看起來像這樣：

<script type="text/javascript" src="main.js"></script>

5.告訴程式何時運行函數

如果我們從不執行函數，那麼它就沒有意義，所以現在讓我們告訴我們的程式何時應該呼叫 getNewColor() 函數。在本例中，每當頁面載入以及點擊「取得新顏色！」按鈕時，我們就會執行 getNewColor()。我們是這樣做的：

<body onload="getNewColor()">
  <div>



<p>Now that we’ve added the boilerplate HTML & linked our CSS documents in the <head>, let’s add the body & build out our HTML. As you can see, the getNewColor() function will run whenever the page loads. More on this function in the following steps.</p>

<p>In the picture above, I add a <div>, which contains a couple of headers, letting the user know where they are & what to do. I then add another <div>, which contains a <span> tag, which will eventually be populated with a HEX code and will display as text on the page. Next, I insert a button that the user clicks to generate a new HEX code. This is done by the getNewColor() function, which I will explain soon.</p>

<h2>
  
  
  3. Add JavaScript!
</h2>

<p>Now we are at the point where the real magic starts to happen. Are you excited? I can tell. Here’s how you do that:<br>
</p>

<pre class="brush:php;toolbar:false"><script>
  function getNewColor() {
    let symbols = "0123456789ABCDEF";
    let color = "#";

6.添加樣式

您可以按照自己的意願執行此部分，也可以根本不執行此部分，但這是我在此項目中使用的樣式：

// continuing getRandomColor()...
    document.body.style.background = color;
    document.getElementByID("hex").textContent = color;
  </script>
</body>
</html>

7. 讓我們來測試一下！

如果您正確地執行了上述步驟，則當頁面載入以及點擊按鈕時，將會產生隨機顏色。頁面背景將設定為隨機顏色，使用者可以複製十六進位代碼。

感謝您閱讀本文！我希望你覺得它有幫助。請記住，有時閱讀文章和遵循教程是可以的，但您應該這樣做只是為了學習概念。一旦您認為自己已經掌握了這些概念，就可以嘗試自己編寫程式。不，你可能不會第一次就把所有事情都做對，但是遇到問題並使用你學到的概念自己弄清楚如何解決它，是成為更好的編碼員的方法。

如果您覺得這篇文章有幫助，我會很感激一個好的評論或一些鼓掌，這樣我就可以知道人們覺得哪些內容有用，這樣我就可以在將來專注於編寫這些內容。

一如既往，祝您編碼愉快！

查看此項目的實際應用

指向此專案的 GitHub 儲存庫的連結

有關 .innerHTML 和 .textContent 之間差異的文章的連結

最初於 2022 年 8 月 15 日以簡單英語在 Medium for JavaScript 上發布

以上是讓我們創建一個隨機顏色產生器！的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css html String define if for format try using Property append copy JS function this innerHTML background github everything Access Other

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：每日 JavaScript 挑戰 #JS - 計算陣列中每個唯一元素的頻率下一篇：每日 JavaScript 挑戰 #JS - 計算陣列中每個唯一元素的頻率

看更多