所以我想一次改變6個正方形顏色，每個顏色都有一個不同的顏色，
function randomNum() {
return Math.floor(Math.random() * 256);
}
function randomRGB() {
var red = randomNum();
var green = randomNum();
var blue = randomNum();
return [red,green,blue];
}
我有這個生成隨機 RGB 顏色值的 JavaScript 代碼，我怎樣才能讓每個方塊在每次重繪 時都有一個隨機顏色，我可以用 6 行代碼來完成，但我正在嘗試學習更簡單的編碼方法，如果有人可以用更簡單的代碼做到這一點，我將不勝感激！
提前謝謝你
[1] https://i.stack.imgur.com/Zx7f6.png
uj5u.com熱心網友回復：
您當前的代碼相當短且可讀性強。考慮堅持下去。
替代方案包括
- 使用（并立即回傳）
Array.fromwithrandomNum作為映射器函式來構造具有 3 個隨機值的陣列 - 使用箭頭函式進行簡潔的回傳
const randomNum = () => Math.floor(Math.random() * 256);
const randomRGB = () => Array.from({ length: 3 }, randomNum);
console.log(randomRGB());如果你想這樣做 6 次，那么你可以使用另一個Array.from.
const randomNum = () => Math.floor(Math.random() * 256);
const randomRGB = () => Array.from({ length: 3 }, randomNum);
const randomSquares = numSquares => Array.from({ length: numSquares }, randomRGB);
console.log(randomSquares(6));uj5u.com熱心網友回復：
您可以簡單地將六位十六進制數字網格化，然后將它們用于您的顏色。例如下面的數字：（#ffffff它是白色的）
function random hexColor() {
return ((Math.random() * 0xfffff * 1000000).toString(16)).slice(0,6);
}
uj5u.com熱心網友回復：
一個簡單的方法：使用hsl()顏色函式并生成隨機的Hue 顏色（從 0 到 360）
const rand = (min, max) => ~~(Math.random() * (max - min) min);
document.querySelectorAll(".grid > div").forEach(elBox => {
elBox.style.background = `hsl(${rand(0, 360)}, 100%, 50%)`;
});.grid {
display: inline-grid;
grid-template-columns: repeat(3, 1fr);
}
.grid > * {
margin: 0.5rem;
height: 3rem;
width: 3rem;
}<div class="grid">
<div></div><div></div><div></div>
<div></div><div></div><div></div>
</div>這樣做的好處是您只更改色調（顏色），但所有元素的飽和度和亮度保持不變。
不飽和、較暗顏色的示例：
顯示代碼片段
const rand = (min, max) => ~~(Math.random() * (max - min) min);
document.querySelectorAll(".grid > div").forEach(elBox => {
elBox.style.background = `hsl(${rand(0, 360)}, 70%, 30%)`;
});.grid {
display: inline-grid;
grid-template-columns: repeat(3, 1fr);
}
.grid > * {
margin: 0.5rem;
height: 3rem;
width: 3rem;
}<div class="grid">
<div></div><div></div><div></div>
<div></div><div></div><div></div>
</div>最終，您還可以生成亮度和飽和度范圍內的隨機值（0 到 100 %）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/515494.html