在 JavaScript 中生成隨機十六進位制顏色


十六進位制 (Hexadecimal) 程式碼是一個六位數程式碼,也是一個三位元組的十六進位制數,用於表示顏色。這三個位元組表示RGB,即紅色、綠色和藍色在特定顏色陰影中的數量。每個位元組將表示一個介於 00 到 FF(十六進位制表示法)或 0 到 255(十進位制表示法)之間的數字。這表示每個顏色元件的強度從 0 到 255。

以下是用於生成隨機十六進位制程式碼的函式:

Math.random() 用於隨機獲取 0 到小於 1(包括小數)之間的數字。

function random_num(maximum) { return Math.floor(Math.random() * maximum); } document.write(random_num(5)); // output: 0, 1 or 2

在上例中,我們將 5 作為最大值輸入。每當我們嘗試執行程式時,它都會列印 0 到 4 之間的輸出。

document.write(random_num()); // output: 0 to <1

在這種情況下,由於我們沒有最大值作為輸入值,因此每當我們執行程式時,它都會列印 0 到小於 1 之間的隨機數。這就是Math.random() 函式的工作方式。

Math.floor() 是一個函式,它會將數字向下舍入到最接近的整數。

document.write(Math.floor(1.95)); // output: 1

在這裡,我們可以看到輸出列印為 5。因此,該值向下舍入到最接近的整數。

document.write(Math.floor(1)); // output: 1

如果傳遞的值是沒有任何浮點數(小數點)的整數,則會將其舍入。

現在,讓我們結合這些函式來生成隨機十六進位制數。

我們使用math.random() 生成隨機數,並將其乘以16777215,因為這個數字是fffff(十六進位制程式碼中的最高值)的十進位制表示。

Math.random()*16777215

這將返回一個帶有小數的隨機數,例如 12421420.464841081,現在我們使用math.floor() 來去除小數並返回整數。

Math.floor(Math.random()*16777215)

現在,我們包含toString() 方法將數字轉換為字串。我們傳遞了 16 作為引數,因為 16 進位制是十六進位制。值為 16 將返回十六進位制程式碼(包含數字和字母)。

Math.floor(Math.random()*16777215).toString(16);

示例 1

以下示例返回顏色的隨機十六進位制程式碼:

<!DOCTYPE html> <html> <title>Generating random Hex color</title> <head> <h3> <div id="demo">Mouse-over on this box to get new random color</div> <p id="color"></p> </h3> <style> body { height: 100vh; padding: 1rem; display: grid; place-items: center; font-family: verdana; } h3 { background: white; padding: 1rem 1rem; text-align: center; border-radius: 5px 20px 5px; } p { display: block; padding: 1px; font-size: 20px; font-weight: lighter; font-family: verdana; } </style> </head> <body> <script> function hex() { const RanHexColor = Math.floor(Math.random()*16777215).toString(16); document.body.style.backgroundColor = "#" + RanHexColor; color.innerHTML = "#" + RanHexColor; } demo.addEventListener("mouseover", hex); hex(); </script> </body> </html>

在輸出中,每當滑鼠懸停在中間的方塊上時,它都會在背景上生成隨機的十六進位制顏色。

示例 2

在這個示例中,我們完成了獲取隨機十六進位制顏色的任務。

slice() 方法將提取字串的一部分。此方法接受 2 個引數(開始,結束)。開始可以是字串中的第一個字元 (0),結束是位置。

const mobile = 'oneplus'; document.write(mobile.slice(2)); // output: "eplus"

在上例中,由於我們只傳遞了開始引數,因此它從索引 2 切片到字串的末尾。

const mobile = 'oneplus'; document.write(mobile.slice(0,3)); // output: "one"

在這個程式碼片段中,我們同時傳遞了開始和結束引數。因此,它將字串從 0 切片到 3 並列印“one”。

const mobile = 'oneplus'; document.write(mobile.slice()); // output: "oneplus"

在這裡,我們沒有向引數中傳遞任何內容,因此預設情況下,它將採用整個字串長度。

我們使用slice() 方法而不是Math.floor() 方法來消除數字後的小數。

以下示例返回顏色的隨機十六進位制程式碼:

<!DOCTYPE html> <html> <title>Generating random Hex color</title> <head> <div> <h3 id="demo">Mousemove here to get new random color</h3> <p id="color"></p> </div> <style> body { height: 100vh; padding: 1rem; display: grid; place-items: center; font-family: verdana; } div { background: white; padding: 1rem 1rem; text-align: center; } p { display: block; padding: 1px; font-size: 20px; font-weight: lighter; font-family: verdana; } </style> </head> <body> <script> function hex() { let RanHexCol = (Math.random()*16777215).toString(16); document.body.style.backgroundColor = '#' + RanHexCol.slice(0, 6); color.innerHTML = "#" + RanHexCol.slice(0, 6); } demo.addEventListener("mousemove", hex); hex(); </script> </body> </html>

每當您將滑鼠懸停在輸出中的 h3 元素上時,我們都可以看到背景中的十六進位制顏色會隨機變化。

示例 3

在下面的示例中,我們將成為十六進位制顏色程式碼一部分的所有字母和數字儲存在一個變數中。迴圈將迭代 6 次,因為十六進位制顏色程式碼由 6 個字母或數字組成,並將值新增到 '#'。現在,隨機十六進位制顏色程式碼已生成。

<!DOCTYPE html> <html> <head> <style> body { height: 100vh; padding: 1rem; display: grid; place-items: center; font-family: verdana; } p { display: block; padding: 1px; font-size: 20px; font-weight: lighter; font-family: verdana; } </style> </head> <body> <p id = "demo"> </p> <script> // storing all letter and digit combinations // for html color code var codes = "0123456789ABCDEF"; // html color code starts with # var color = '#'; // generating 6 times as HTML color code consist // of 6 letter or digits let i = 0; for (i; i < 6; i++) document.body.style.backgroundColor = color += codes[(Math.floor(Math.random() * 16))]; document.getElementById("demo").innerHTML = color; </script> </body> </html>

在輸出中,每次執行程式時,背景中的十六進位制顏色都會隨機更改。

更新於:2022年9月22日

2K+ 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始學習
廣告