使用 for 循环，我创建了一个可变数量的div，每当我用鼠标输入它们时，它们都会改变它们的背景颜色。好消息是，每个div最终都有自己的颜色。现在我想添加一个函数，每当我用鼠标输入div时，它都会将div的亮度降低10%。问题是，到目前为止，我只成功地减少了div的所有背景颜色，而不是个人的背景颜色。我很抱歉措辞如此糟糕，但希望得到任何帮助。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Etch-a-sketch</title>
</head>
<body>
<h1>Etch-a-sketch</h1>
<button id="start">Start</button>
<div id="container"></div>
</body>
<script>
//randomColor function is taken from http://www.devcurry.com/2010/08/generate-random-colors-using-javascript.html //
function randomRgb() {
col = "rgb("
+ randomColor(255) + ","
+ randomColor(255) + ","
+ randomColor(255) + ")";
}
function randomColor(num) {
return Math.floor(Math.random() * num);
}
function resetColorOfBoxes() {
boxes = document.querySelectorAll('div');
boxes.forEach(box => box.style.backgroundColor = "white");
}
function promptEntry() {
let userInput = prompt("How many rows would you like?", "Enter a number");
if (isNaN(userInput)) {
alert("That's not a valid entry. Try again");
promptEntry();
}
else {
createGrid(userInput);
}
}
function createGrid(numberOfRows) {
resetColorOfBoxes()
/*Change number of grid-template-columns and grid-template-rows under #container in stylesheet*/
document.documentElement.style.setProperty("--columns-row", numberOfRows);
let i = 0;
let numberOfBoxes = numberOfRows**2;
/*Create boxes*/
for (i; i < numberOfBoxes ; i++) {
var div = document.createElement("div");
document.getElementById("container").appendChild(div);
div.addEventListener("mouseenter", function () {
randomRgb();
this.style.backgroundColor = col;
console.log(value);
});
}
}
let btn = document.getElementById("start")
btn.addEventListener("click", promptEntry)
</script>
</html>
这是提示(取自 theodinproject.com(：
(可选(：例如，不要只是将网格的颜色从黑色更改为白色，而是让每个网格通过它都更改为完全随机的 RGB 值。然后尝试让每个通道再添加 10% 的黑色，这样只有在 10 次传递后，正方形才完全变黑。
谢谢！
我认为你走在正确的轨道上。
一种方法注意：我已经删除了大部分包装代码，因此您可以了解概念并根据需要设置其样式。
function randomRgb() {
return `rgb(${randomInt(255)},${randomInt(255)},${randomInt(255)})`;
}
function rgb2hex(rgb) {
rgb = rgb.match(/^rgba?[s+]?([s+]?(d+)[s+]?,[s+]?(d+)[s+]?,[s+]?(d+)[s+]?/i);
return (rgb && rgb.length === 4) ? '#' +
('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) +
('0' + parseInt(rgb[2], 10).toString(16)).slice(-2) +
('0' + parseInt(rgb[3], 10).toString(16)).slice(-2) : '';
}
function randomInt(num) {
return Math.floor(Math.random() * num);
}
/**
* @param color {string} HEX color
* @param amount {number}Can be negative for lighter color or positive for darker
* @return {string}
*/
function lightenDarkenColor(color, amount) {
let usePound = false;
if (color[0] === '#') {
color = color.slice(1);
usePound = true;
}
const num = parseInt(color, 16);
let r = (num >> 16) + amount;
if (r > 255) r = 255;
else if (r < 0) r = 0;
let b = ((num >> 8) & 0x00FF) + amount;
if (b > 255) b = 255;
else if (b < 0) b = 0;
let g = (num & 0x0000FF) + amount;
if (g > 255) g = 255;
else if (g < 0) g = 0;
return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16);
}
function createGrid(num) {
const container = document.getElementById('container');
for (let i = 0; i < num; i++) {
const div = document.createElement('div');
// Remove the next line, just for the demo
div.innerHTML = `${i}`;
const defaultColor = randomRgb();
const hex = rgb2hex(defaultColor);
const altColor = lightenDarkenColor(hex, -10);
div.style.backgroundColor = defaultColor;
// Remove the next line, just for the demo
div.style.padding = '20px';
div.onmouseout = function() {
div.style.backgroundColor = defaultColor;
};
div.onmouseover = function() {
div.style.backgroundColor = altColor;
};
container.appendChild(div);
}
}
createGrid(10);<h1>Please hover over the boxes </h1>
<div id="container"></div>