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