在 JavaScript 中生成隨機顏色

Muhammad Muzammil Hussain 2023年1月30日 2022年5月11日
  1. 在 HTML 中使用 Math.floor(Math.random()) 使用 JavaScript 生成隨機顏色
  2. 在 JavaScript 中獲取隨機顏色結果的替代方法
在 JavaScript 中生成隨機顏色

本文將通過示例討論使用 JavaScript 內建數學函式和 UI(使用者介面)的 JQuery 庫來隨機更改 HTML 網頁 onClick 的背景顏色。使用數學函式,我們可以輕鬆地獲得舍入值作為下限和上限,並且我們可以使用 math.random() 獲得一個隨機值。

在 HTML 中使用 Math.floor(Math.random()) 使用 JavaScript 生成隨機顏色

每當使用者按下 Change background color 按鈕時,就會觸發 getRandomColor 方法。該方法使用 JQuery 將 CSS 樣式分配給我們將更改背景顏色的 HTML 網頁的 body 標記。

<!DOCTYPE html>
<html lang="en">
<head>

<title>Random colors</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body id ="bodyId" >
<Div style="text-align: center; width: 100%;">
<H1>Generate Random Color using JavaScript/jquery</H1>
<button onclick="getRandomColor()">Change background color</button>
</Div>

</body>
<script>
   //The ColorCode() will give the code every time.
   function ColorCode() {
      var makingColorCode = '0123456789ABCDEF';
      var finalCode = '#';
      for (var counter = 0; counter < 6; counter++) {
         finalCode =finalCode+ makingColorCode[Math.floor(Math.random() * 16)];
      }
      return finalCode;
   }
   //Function calling on button click.
   function getRandomColor() {
      $("#bodyId").css("background-color", ColorCode());
   }
</script>
</html>

在上面的 HTML 頁面原始碼中,你可以在 <script> 標籤中看到 JQuery 連結,這些連結是在 doctype html 中使用 JQuery 庫所必需的。在下一步中,function getRandomColor() 在另一個名為 function ColorCode() 的函式內的 <script> 標記內宣告,該函式分配具有屬性背景顏色的 CSS 樣式。

function ColorCode() 包含一串十六進位制十進位制值(0-F),我們使用 for 迴圈來執行程式碼語句,直到給定的條件為真。在這種情況下,要滿足的條件是 var counter = 0;計數器 < 6;計數器++

該迴圈將通過將隨機值與長度為 6# 連線起來生成一個 finalCode 字串,然後我們返回該 finalCode 字串並將其用作顏色屬性。

檢查給定的 HTML 程式碼

按照這四個簡單的步驟來了解 getRandomColor 方法。

  • 建立一個文字文件。你可以使用記事本或任何其他文字編輯工具。
  • 將給定的程式碼貼上到建立的文字檔案中。
  • 使用 .html 副檔名儲存該文字檔案,並使用任何預設瀏覽器開啟它。
  • 你可以看到 Change background color 按鈕。使用該按鈕,你可以隨機更改背景顏色。

在 JavaScript 中獲取隨機顏色結果的替代方法

你也可以使用一行程式碼在 JavaScript 中實現隨機顏色選擇,如下所示。它最大限度地減少了程式碼長度以節省時間/記憶體並提供有效的結果。

function generateRandomCode() {
     var myRandomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
      return myRandomColor;
   }
//will generate any random color

在這兩個示例中,generateRandomCode()ColorCode() 將使用 javaScript 內建方法 Math.random()6 個長度值的組合返回一個隨機顏色字串。

相關文章 - JavaScript Random