javascript - 如何使我的 Etch-A-Sketch 网格在悬停时改变颜色和不透明度？-6ren

javascript - 如何使我的 Etch-A-Sketch 网格在悬停时改变颜色和不透明度？

转载作者：行者123 更新时间：2023-11-28 03:05:27

27

4

我一直在尝试做一个 eclipse 刻草图作业。我能够使用createGrids函数生成网格，但使用changeGridColor函数和resetButton函数添加了由createGrids函数创建的网格将会消失。我一直在尝试将网格的颜色更改为随机颜色并增加悬停时的不透明度，但它不起作用。请问我将如何实现这一目标？检查代码。

HTML

<!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>

CSS

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
}

JS

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();};

最佳答案

您正在向尚未添加到 DOM 的单元格添加监听器。
- 创建单元格时将鼠标悬停添加到单元格中。
您还可以从容器元素中获取网格大小。

let container = document.querySelector(".container");
let size = parseInt(window.getComputedStyle(container).width, 10);

function createGrid(gridSize = 16) {
  for (let rowCol = 0; rowCol < gridSize ** 2; rowCol++) {
    let gridCell = document.createElement("div");
    Object.assign(gridCell.style, {
      height : `${(size / gridSize) - 2}px`,
      width : `${(size / gridSize) - 2}px`
    });
    gridCell.classList.add("box");
    gridCell.addEventListener('mouseover', changeGridColor)
    container.appendChild(gridCell);
  }
}

let resetButton = document.querySelector(".resetButton");
resetButton.addEventListener('click', handleResetButton);

window.onload = function() {
  createGrid();
};

function changeGridColor(e) {
  let color = `rgb(${[0, 0, 0].map(channel => {
    return Math.floor(Math.random() * 256);
  }).join(',')})`
  Object.assign(e.target.style, {
    backgroundColor : color,
    opacity : 0.25
  });
}

function handleResetButton(e) {
  let gridNumber = +prompt("Enter the grid size you want:", 16);
  while (container.firstChild) {
    container.removeChild(container.lastChild);
  }
  createGrid(gridNumber);
}

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: 400px;
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
}

.box {
  border: 1px solid black;
}

.resetButton {
  border: 1px solid #222;
  height: 40px;
  width: 90px;
  margin: 20px auto;
  line-height: 40px;
  border-radius: 10px;
  background: #F7F7F7;
}

.resetButton:hover {
  border: 1px solid black;
  background: #FFF;
  cursor: pointer;
}

<h1>Etch-A-Sketch</h1>
<div class="container"></div>
<div class="resetButton">Reset</div>

关于javascript - 如何使我的 Etch-A-Sketch 网格在悬停时改变颜色和不透明度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60656460/

27

4

0

文章推荐： javascript - 使用 display none 而不是 html 呈现 html

文章推荐： C++ 模板类从静态助手调用自己的构造函数

文章推荐： html - 使 div 的高度成为响应式设计页面的其余部分

文章推荐： html - 为 div only css 设置相同的高度和响应度

sketch-3 - 如何在 Sketch 中调整箭头大小？
如何调整箭头大小，而不是粗细 enter image description here 最佳答案很遗憾，没有具体的设置。我建议您使用一条线和一个元素(例如三角形)来获得与可控尺寸相同的效果。您还可
sketch-3 - 如何从 Sketch 中的矩形中减去矢量路径
如何在 Sketch 中减去矢量路径。形状很简单，文字也可以。附加图像中的白线需要穿过矩形。建议？最佳答案您需要先将矢量路径转换为轮廓。选择带有轮廓的所需元素在菜单内选择:Layer > Co
sketch-3 - sketch app 使用 pt 仅用于文本大小，而似乎用于其他所有内容？
素描字体在PT中设置现在我想使用 bootstrap 4 编写一个网络应用程序。所以我习惯使用 pixels/em/rem 来表示字体和距离。我使用 PT 看不到值。积分似乎是针对打印媒体的那么将
algorithm - 输出 AMS Sketch 和 Count Sketch 算法的区别
我试图了解 AMS sketch 和 Count Sketch 算法之间的区别。我的理解是他们的目标/输出都是返回一个草图，这是一个频率向量。它包含经过的 Steam 中元素的频率。两者有什么区别？
javascript - Sketch App Plugin - Google 和 Facebook 身份验证并在 Sketch 插件中维护用户 session ？
开发草图插件，该插件可以基于用户身份验证从插图托管平台获取/收集数据。我正在使用 SKPM with sketch-module-web-view . 目前，我们有针对该网站的 Google 和 F
sketch-3 - 如何使文本图层在草图上自动调整宽度
我创建了一个文本图层，默认情况下它的宽度只是对内容的响应，但是现在，我调整了它的宽度或它所属的组的大小，然后它的宽度将像下面一样增长。现在，我必须手动减小其宽度。我怎样才能让它减少它的宽度以自动响
sketch-3 - 如何在草图中不带阴影地导出
我是素描新手。在草图中设计了一个图标后，我想将其导出为 PNG。图标是用多条路径绘制并组合在一起的。但是当我导出它时，导出的图像中有阴影。我不要影子有没有办法摆脱它？最佳答案你可以试试icongr
iphone - 如何创建一个让用户通过手指触摸绘制 'sketch' 的屏幕？
我正在开发一个应用程序，它可以让用户通过手指触摸在屏幕上“绘画”——所以基本上用户可以写、画形状——类似于白板。问题是，就 iphone 图形编程而言，我是一个新手，如果这里的社区提供一些示例代码链
cocoa - 使用 Sketch 插件添加新画板
我正在尝试构建我的第一个 Sketch 插件，该插件首先向页面添加新的画板。 Sketch插件使用JSTalk ，并在Bohemian Coding documentation中它指出画板是一种图层，
javascript - Sketch 3 插件更改画板颜色
所以我似乎找不到改变画板背景颜色的方法。 This is what i have currently just missing the method to set the color. var doc
jquery - 在窗口完全加载innerHTML后加载processing.js sketch？
我的processing.js 草图有一个 size() 调用，该调用取决于在获取 div 大小时加载的窗口。 50% 的情况下，草图会在 CSS 启动之前加载，因此草图的大小不正确。我认为解决这个问
c - 响应某些命令的 Sketch 是如何完成的？
好吧，我现在有一个半完整的 Arduino 草图。基本上，如果一串字符等于 *{blink_Flow_A}*，下面的草图将使 kegboard-mini 扩展板上的 LED 闪烁，但是，在 Ardui
javascript - Sketch- Pad 代码不工作
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-top
css - Sketch SVG 线性渐变在浏览器中是黑色而不是白色
我有一个简单的 SVG，我画的是 Sketch 2。形状是一个简单的倾斜矩形，从上到下具有线性渐变。顶部为白色，不透明度为 75%，底部也是白色，不透明度为 0%。我在上面的示例中添加了灰色背景，
javascript - 如何在浏览器中运行Processing+Twitter4j sketch
我是一名练习处理的新手程序员，最近开发了一个使用 Twitter4j 的草图。当我从处理开发环境中以 Java 模式运行草图时，它运行得很好。此外，当我从 Java 模式导出草图时，生成的应用程序运行
c++ - Arduino Sketch 编译然后在上传时卡住
我目前正在开发一个自动跳棋盘。我使用三个类在 C++ 中对其进行了编码，然后进行了必要的更改以将其用作 Arduino 上的库。C++ 代码分为三个类，它们为棋盘的位置启动一个 8 x 8 数组，并跟
javascript - Sketch.js - 画笔从鼠标指针下方开始
工作: http://jsfiddle.net/3rxvnrLp/1/ 新: http://jsfiddle.net/g3sTL/229/ 检查工作 fiddle 。如果您按住左键并开始拖动鼠标，画笔
java - 使用java在arduino ide上运行c的arduino sketch
我有在 test.ino 中编写的 Arduino 代码，现在我想使用 java 将其发送到 Arduino ide 上。我应该怎么办？我的 test.ino 代码如下。 void setup() {
c - Arduino sketch 的字符串命令有点工作但不是真的
所以我有一个 Arduino 草图，它读取串行命令(一串字符)，然后让草图根据它接收到的命令执行某些操作。截至目前，我有两个命令， {open_valve} {close_valve} 当我向 Ard
ios - Sketch + Xcode 启动图像
我正在尝试在我的 Xcode 项目中插入启动图像。我用 Sketch 3 创建了图像并以正常、@2x 和 @3x 格式导出，我还检查了启动图像所需的尺寸 here它们匹配，但显然 XCode 不想让我

首页

博学

6Ren·AI

商城

javascript - 如何使我的 Etch-A-Sketch 网格在悬停时改变颜色和不透明度？