在 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 個長度值的組合返回一個隨機顏色字串。