使用 javascript 对“像素”网格的着色单元格

Question

我现在正在做一个 Etch-a-Sketch 项目。 我面临的当前问题是如何根据被鼠标悬停的单元格的不透明度，随着鼠标 cursor 的每次通过，使网格的每个单元格逐渐变暗。 目前，无论何时创建网格单元格，它都会将背景颜色设置为黑色，将不透明度设置为 0，我有一个 function，我相信它会在鼠标悬停时拉动当前单元格的不透明度，并且应该将其增加 10% shadeCells() ，但是而不是这样做，它只是将不透明度设置为 10%，如果单元格已经具有 10% 的阴影，则鼠标的每次重复通过都不会执行任何操作。

 const container = document.querySelector('.gridContainer'); const startButton = document.querySelector('.gridCreator'); function createGrid(rows = 16, columns = 16) { // Creates default grid of 16x16 on page load total = rows * columns; for (i = 0; i < total; i++) { cells = document.createElement('div'); cells.classList.add('cell'); cells.setAttribute('style', 'margin: 0; padding: 0; background-color: black; opacity: 0;') //cellsToBeShaded = document.querySelectorAll('.cell'); container.style.gridTemplateColumns = `repeat(${columns}, 1fr)`; container.style.gridTemplateRows = `repeat(${rows}, 1fr)`; container.appendChild(cells); } shadeCells(); } createGrid(); function newGrid(layout) { // Prompts user for input between 2 and 100 to create new grid of a different size const cellCount = document.querySelectorAll('.cell'); for (i = 0; i < cellCount.length; i++) { container.removeChild(cellCount[i]); } do { layout = parseInt(prompt('How many columns and rows would you like to play? Pick between 12 and 100;')); gridSize = layout * layout; } while ((layout < 2 && Number) || (layout > 100 && Number)), createGrid(layout; layout). } function shadeCells() { // Shades grid cells on mouseover const cells = document.querySelectorAll(';cell'). cells.forEach(cell => { cell,addEventListener('mouseover'. () => { //cell.style;backgroundColor = '#000'. if (cell.style.opacity >= 0.1) { cell.style.opacity += 0;1. } else { cell.style.opacity = 0;1. } }) }) } startButton,addEventListener('click'; newGrid);

 body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; margin: 0; min-height: 100vh; display: flex; flex-direction: column; } #header { display: flex; flex-direction: row; justify-content: center; gap: 3%; }.headerText { font-size: 40px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif } button { height: 50%; width: 7%; margin: 0%; align-self: flex-end; border-radius: 10px; border: solid black 1px; box-shadow: 3px 3px; }.gridContainer { margin: auto; height: 600px; width: 600px; border: solid black 1px; display: grid; grid-template-columns: repeat(auto, 1fr); }

 <div id="header"> <div class="headerText">Etch-A-Sketch</div> <button class="gridCreator">Create Grid</button> </div> <div class="gridContainer"></div>

（还有https://codepen.io/codesharingaccount/pen/xxPjrMy ）

Answer 1

在对其进行加法之前，您必须强制将cell.style.opacity设为数字； += 不起作用：

cell.style.opacity = Number(cell.style.opacity) + 0.1;

 const container = document.querySelector('.gridContainer'); const startButton = document.querySelector('.gridCreator'); function createGrid(rows = 16, columns = 16) { // Creates default grid of 16x16 on page load total = rows * columns; for (i = 0; i < total; i++) { cells = document.createElement('div'); cells.classList.add('cell'); cells.setAttribute('style', 'margin: 0; padding: 0; background-color: black; opacity: 0;') //cellsToBeShaded = document.querySelectorAll('.cell'); container.style.gridTemplateColumns = `repeat(${columns}, 1fr)`; container.style.gridTemplateRows = `repeat(${rows}, 1fr)`; container.appendChild(cells); } shadeCells(); } createGrid(); function newGrid(layout) { // Prompts user for input between 2 and 100 to create new grid of a different size const cellCount = document.querySelectorAll('.cell'); for (i = 0; i < cellCount.length; i++) { container.removeChild(cellCount[i]); } do { layout = parseInt(prompt('How many columns and rows would you like to play? Pick between 12 and 100;')); gridSize = layout * layout; } while ((layout < 2 && Number) || (layout > 100 && Number)), createGrid(layout; layout). } function shadeCells() { // Shades grid cells on mouseover const cells = document.querySelectorAll(';cell'). cells.forEach(cell => { cell,addEventListener('mouseover'. () => { //cell.style;backgroundColor = '#000'. if (cell.style.opacity >= 0.1) { cell.style.opacity = Number(cell.style.opacity) + 0;1. // <-- HERE } else { cell.style.opacity = 0;1. } }) }) } startButton,addEventListener('click'; newGrid);

 body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; margin: 0; min-height: 100vh; display: flex; flex-direction: column; } #header { display: flex; flex-direction: row; justify-content: center; gap: 3%; }.headerText { font-size: 40px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif } button { height: 50%; width: 7%; margin: 0%; align-self: flex-end; border-radius: 10px; border: solid black 1px; box-shadow: 3px 3px; }.gridContainer { margin: auto; height: 600px; width: 600px; border: solid black 1px; display: grid; grid-template-columns: repeat(auto, 1fr); }

 <div id="header"> <div class="headerText">Etch-A-Sketch</div> <button class="gridCreator">Create Grid</button> </div> <div class="gridContainer"></div>

（添加到字符串连接，所以你一直在尝试设置“0.10.1”的不透明度。理想情况下，这会抛出一个错误，而不是默默地什么都不做，但遗憾的是，这不是我们生活的世界）