我正在尝试做一个Etch-A-Sketch项目，目前遇到了一些障碍。当前，能够根据提示时的用户输入创建网格，并通过按钮清除网格。
我现在面临的问题是function colorChange()，每次在div上捕获鼠标悬停事件时，我都会尝试提高背景颜色的不透明度。一切正常，但在当前代码中，不透明度最大为0.9。
如果改为使用if (rgbaValue <= 0.9)或(rgbaValue < 1)，则不透明度值将在0.9之后的下一个悬停时重置为0.1。我如何在不重置的情况下将不透明度设为1？
代码如下：
html
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<title>Etch A Sketch</title>
<body>
<div>
<button type="button" onclick="clearGrid()">Click to clear grid</button>
</div>
<div id="container"></div>
<script src="java.js"></script>
</body>
</html>
javascript
let gridSize = 0;
let gridWidth = 0;
gridSize = window.prompt("Please input the amount of squares per side of grid that you want created");
gridWidth = 100/gridSize;
createGrid();
colorChange();
function createSquare() {
const mainBody = document.querySelector("#container");
const gridMake = document.createElement("div");
gridMake.classList.add("squaregrid");
gridMake.style.width = gridWidth + "%";
gridMake.style.paddingBottom = gridWidth + "%";
mainBody.appendChild(gridMake);
}
function createGrid() {
gridCount = 0;
while (gridCount < (gridSize*gridSize)) {
createSquare();
gridCount++
}
}
function colorChange() {
const selectSquare = document.querySelectorAll(".squaregrid");
selectSquare.forEach(square => square.addEventListener("mouseover", event => {
square.classList.add('hover-change');
const style = getComputedStyle(square);
let styleDeep = style.backgroundColor;
rgbaValue = parseFloat(styleDeep.replace(/^.*,(.+)\)/,'$1'));
if (rgbaValue < 0.9) {
square.style.backgroundColor = `rgba(0,0,0, ${rgbaValue + 0.1})`;
}
}))
}
function clearGrid() {
const squareReset = document.querySelectorAll(".squaregrid");
squareReset.forEach(square => square.style.backgroundColor = "");
squareReset.forEach(square => square.classList.remove("hover-change"));
}
的CSS
.squaregrid {
box-sizing: border-box;
display: inline-block;
border: 0.05px solid black;
margin:0;
}
html, body {
line-height: 0;
height: 94vh;
width: 94vh;
margin-left: auto;
margin-right: auto;
}
#container {
display: block;
overflow: hidden;
margin-left: auto;
margin-right: auto;
border: 0.05px solid black;
}
.hover-change {
background-color: rgba(0, 0, 0, 1);
}
button {
display: block;
margin-bottom: 5px;
}
最佳答案
代码的主要问题与浏览器的方式有关
处理完全不透明。
rgba（）表示法接受范围为0.0到1.0（含）或百分比的数字，其中数字1对应于100％for the value of the alpha channel。间隔之外的任何值（尽管有效）都被钳位到该范围内的最接近极限。
大于1或100％的值将被钳位，
从计算值中省略
background-color: rgba(0, 0, 0, 0.5); # computed (0, 0, 0, 0.5)
background-color: rgba(0, 0, 0, 1); # computed (0, 0, 0)
background-color: rgba(0, 0, 0, 1.3); # computed (0, 0, 0)
您的正则表达式正在捕获最后一个逗号之间的任何字符
在rgba（）表示法和计算所得的右括号中
值。分配后触发事件侦听器时
平方等于或大于1的正则表达式捕获0
并相应地设置alpha值。
在下面的代码片段中，您可以看到使用其他正则表达式解决问题的一种方法。
或者，您可以将不透明度属性用作@Luca Neri
已经建议。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
margin: 0;
}
.squaregrid {
display: grid;
}
.square {
background-color: rgba(20, 20, 20, 0.1);
}
button {
position: fixed;
bottom: 0;
}
</style>
</head>
<body>
<div class="squaregrid"></div>
<button onclick="clearScreen()">CLEAR</button>
<script>
//request number of rows
let rows = window.prompt("ENTER NUMBER OF ROWS")
//create a grid
document.getElementsByClassName("squaregrid")[0].style.gridTemplateColumns = "repeat("+ 1000/rows+", 1fr)"
//create Squares
for (let i = 0; i < 1000; i++) {
let newSquare = document.createElement("div")
newSquare.className = "square"
newSquare.style.height = 100/rows + "vh"
document.querySelector(".squaregrid").appendChild(newSquare)
}
//get HTML Collection of all squares
let allSquares = document.getElementsByClassName("square");
//loop HTML Collection and add a mouseover event listener to each square
for (square of allSquares) {
square.addEventListener("mouseover", event => {
//get computed background-color value of the square being hovered over
let squareBackground = getComputedStyle(event.target).backgroundColor;
//the regular expression
let regex = /\d\.\d/
//check if does not already have full opacity
if (squareBackground.match(regex) != null) {
//get the alpha channel of the square being hovered over
let squareOpacity = Number(squareBackground.match(regex))
//increase alpha value
event.target.style.backgroundColor = squareBackground.replace(regex, squareOpacity + 0.1)
}
})}
//reset every square on the grid
function clearScreen() {
for (square of allSquares) {
square.style.backgroundColor = "rgba(20, 20, 20, 0.1)"
}
}
</script>
</body>
</html>感谢您的反馈，@ disinfor。
关于javascript - RGBA不透明度重置( eclipse 刻-素描)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59720771/