作为函数的结果增加特定元素的变量值

Question

使用 for 循环，我创建了可变数量的 divs，每当我用鼠标输入它们时，它们的背景颜色都会改变。好消息是，每个 div 最终都有自己的颜色。现在我想添加一个函数，每当我用鼠标输入它时，它都会将 div 的亮度降低 10%。问题是，直到现在我只成功地减少了所有 div 的背景颜色，而不是 individual 的背景颜色。我很抱歉措辞如此糟糕，但会很感激任何帮助。

<!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 次通过之后方块才完全变黑。

谢谢！

Answer 1

我认为您的方向是正确的。

一种解决方法注意：我删除了大部分包装代码，因此您可以了解概念并在之后根据需要设置样式。

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>

作为函数的结果增加特定元素的变量值

Increase specific element's variable value as a result of function

html

javascript

css

brightness