Javascript 如何使我的蚀刻草图网格在悬停时更改颜色和不透明度?
我一直在做蚀刻素描作业。我可以使用createGrids函数生成网格,但是使用changeGridColor函数和resetButton函数添加了createGrids函数创建的网格将消失。我一直在尝试将网格的颜色更改为随机颜色,并在悬停时增加不透明度,但它不起作用。请问我将如何做到这一点?检查代码 HTML JSJavascript 如何使我的蚀刻草图网格在悬停时更改颜色和不透明度?,javascript,Javascript,我一直在做蚀刻素描作业。我可以使用createGrids函数生成网格,但是使用changeGridColor函数和resetButton函数添加了createGrids函数创建的网格将消失。我一直在尝试将网格的颜色更改为随机颜色,并在悬停时增加不透明度,但它不起作用。请问我将如何做到这一点?检查代码 HTML JS let container=document.querySelector(“.container”); 让resetButton=document.querySelector(“re
let container=document.querySelector(“.container”);
让resetButton=document.querySelector(“resetButton”);
函数createGrids(gridNumber=16){
让containerSize=Number(960);
设gridSize=Number(gridNumber);
for(设rowCol=0;rowColcell.addEventListener(“mouseover”,changeGridColor));
window.onload=函数(){createGrids();};
- 创建单元格时,将鼠标盖添加到单元格中
let container=document.querySelector(“.container”);
让size=parseInt(window.getComputedStyle(container).width,10);
函数createGrid(gridSize=16){
for(设rowCol=0;rowCol{
返回Math.floor(Math.random()*256);
}).join(“,”)})`
Object.assign(如target.style、{
背景颜色:颜色,
不透明度:0.25
});
}
功能手柄复位按钮(e){
让gridNumber=+提示符(“输入所需的网格大小:”,16);
while(container.firstChild){
container.removeChild(container.lastChild);
}
createGrid(gridNumber);
}
正文{
文本对齐:居中;
字体大小:16px;
宽度:100%;
边际:0px;
}
h1{
颜色:白色;
字体大小:1.7rem;
字体大小:粗体;
高度:50px;
背景色:rgb(185113113);
边际上限:0px;
线高:50px;
}
.集装箱{
显示器:flex;
弯曲方向:行;
柔性包装:包装;
宽度:400px;
高度:400px;
边框:1px纯黑;
保证金:0自动;
}
.盒子{
边框:1px纯黑;
}
.重置按钮{
边框:1px实心#222;
高度:40px;
宽度:90px;
保证金:20px自动;
线高:40px;
边界半径:10px;
背景:#F7F7F7;
}
.reset按钮:悬停{
边框:1px纯黑;
背景:#FFF;
光标:指针;
}
Etch-A-Sketch
重置
- 创建单元格时,将鼠标盖添加到单元格中
let container=document.querySelector(“.container”);
让size=parseInt(window.getComputedStyle(container).width,10);
函数createGrid(gridSize=16){
for(设rowCol=0;rowCol{
返回Math.floor(Math.random()*256);
}).join(“,”)})`
Object.assign(如target.style、{
背景颜色:颜色,
不透明度:0.25
});
}
功能手柄复位按钮(e){
让gridNumber=+提示符(“输入所需的网格大小:”,16);
while(container.firstChild){
container.removeChild(container.lastChild);
}
createGrid(gridNumber);
}
正文{
文本对齐:居中;
字体大小:16px;
宽度:100%;
边际:0px;
}
h1{
颜色:白色;
字体大小:1.7rem;
字体大小:粗体;
高度:50px;
背景色:rgb(185113113);
边际上限:0px;
线高:50px;
}
.集装箱{
显示器:flex;
弯曲方向:行;
柔性包装:包装;
宽度:400px;
高度:400px;
边框:1px纯黑;
保证金:0自动;
}
.盒子{
边框:1px纯黑;
}
.重置按钮{
边框:1px实心#222;
高度:40px;
宽度:90px;
保证金:20px自动;
线高:40px;
边界半径:
<!DOCTYPE html>
<html>
<head>
<title>Etch-A-Sketch</title>
<link rel="stylesheet" href="etch-a-sketch.css">
</head>
<body>
<h1>Etch-A-Sketch</h1>
<div class="container"></div>
<div class="resetButton">Reset</div>
<script src="etch-a-sketch.js"></script>
</body>
</html>
body{
text-align: center;
font-size: 16px;
width: 100%;
margin: 0px;
}
h1{
color: white;
font-size: 1.7rem;
font-weight: bolder;
height: 50px;
background-color: rgb(185, 113, 113);
margin-top: 0px;
line-height: 50px;
}
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 960px;
height: 960px;
border: 1px solid black;
margin: 0 auto;
}
.box{
border: 1px solid black;
}
.resetButton{
border: 1px solid black;
height: 40px;
width: 90px;
margin: 20px auto;
line-height: 40px;
border-radius: 10px
}
let container = document.querySelector(".container");
let resetButton = document.querySelector("resetButton");
function createGrids(gridNumber = 16) {
let containerSize = Number(960);
let gridSize = Number(gridNumber);
for (let rowCol = 0; rowCol < gridSize ** 2; rowCol++){
let gridCell = document.createElement("div");
gridCell.style.height = `${(containerSize / gridSize) - 2}px`;
gridCell.style.width = `${(containerSize / gridSize) - 2}px`;
gridCell.classList.add("box");
container.appendChild(gridCell);
}
}
function changeGridColor(event) {
let a = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
let c = Math.floor(Math.random() * 256);
event.target.style.backgroundColor = `rgb(${a}, ${b}, ${c})`;
event.target.style.opacity += 0.1;
console.log(event)
}
function resetButton() {
let gridNumber = +prompt("Enter the grid size you want:", 16);
while (container.firstChild) {
container.removeChild(container.lastChild);
}
createGrids(gridNumber);
}
let resetButton = document.querySelector("resetButton");
resetButton.onclick = resetButton();
let gridCells = document.querySelectorAll(".box");
gridCells.forEach(cell => cell.addEventListener("mouseover", changeGridColor));
window.onload = function () {createGrids();};