动态可变尺寸CSS Grid布局的实现与常见陷阱规避

function createGrid(size) {
  // 清除所有现有子元素
  container.innerHTML = '';

  container.style.gridTemplateRows = `repeat(${size}, 1fr)`;
  container.style.gridTemplateColumns = `repeat(${size}, 1fr)`;

  // ... (后续创建单元格的代码)
}

function setSize() {
  let x = prompt("What size grid? (Up to 100)");
  if (x === null || x === "" || isNaN(x)) { // 处理用户取消或输入无效值
    alert("Invalid input. Please enter a number.");
    return;
  }
  x = parseInt(x); // 确保x是数字

  if (x > 100 || x < 1) { // 增加最小尺寸限制
    alert("Grid size must be between 1 and 100.");
  } else {
    // 确保这里使用x来设置网格模板
    container.style.gridTemplateRows = `repeat(${x}, 1fr)`;
    container.style.gridTemplateColumns = `repeat(${x}, 1fr)`;
    createGrid(x); // 调用createGrid创建新网格
  }
}

const container = document.querySelector(".container");
const eraserBtn = document.getElementById("eraser"); // 重命名以避免与尺寸变量冲突
const setSizeBtn = document.getElementById("setSize"); // 重命名
const pinkBtn = document.getElementById("pink"); // 重命名
const resetBtn = document.getElementById("reset");

let currentColor = "pink"; // 默认颜色

function createGrid(size) {
  container.innerHTML = ''; // 清除现有子元素
  container.style.gridTemplateRows = `repeat(${size}, 1fr)`;
  container.style.gridTemplateColumns = `repeat(${size}, 1fr)`;

  for (let i = 0; i < (size * size); i++) {
    let cell = document.createElement("div");
    cell.style.backgroundColor = "white";
    cell.style.border = "white solid 0.1px";
    cell.style.boxSizing = "border-box"; // 确保边框不影响总尺寸
    container.appendChild(cell);

    // 为每个单元格添加mouseover事件，根据当前颜色绘制
    cell.addEventListener('mouseover', () => {
      cell.style.backgroundColor = currentColor;
    });
  }
}

// 初始创建网格
createGrid(16);

// 按钮事件监听器只绑定一次
eraserBtn.addEventListener('click', () => {
  currentColor = "white"; // 设置为白色，模拟橡皮擦
});

pinkBtn.addEventListener('click', () => {
  currentColor = "pink"; // 设置为粉色
});

resetBtn.addEventListener('click', () => {
  // 遍历所有单元格并重置颜色
  const cells = container.querySelectorAll('div');
  cells.forEach(cell => {
    cell.style.backgroundColor = "white";
  });
  currentColor = "pink"; // 重置后默认颜色恢复为粉色
});

setSizeBtn.addEventListener('click', setSize);

function setSize() {
  let x = prompt("What size grid? (Up to 100)");
  if (x === null || x === "" || isNaN(x)) {
    alert("Invalid input. Please enter a number.");
    return;
  }
  x = parseInt(x);

  if (x > 100 || x < 1) {
    alert("Grid size must be between 1 and 100.");
  } else {
    createGrid(x); // 调用createGrid创建新网格
    currentColor = "pink"; // 重置尺寸后，默认颜色恢复为粉色
  }
}

// java.js
const container = document.querySelector(".container");
const eraserBtn = document.getElementById("eraser");
const setSizeBtn = document.getElementById("setSize");
const pinkBtn = document.getElementById("pink");
const resetBtn = document.getElementById("reset");

let currentColor = "pink"; // 默认绘图颜色

/**
 * 创建指定尺寸的网格。
 * @param {number} size - 网格的边长（例如，16表示16x16的网格）。
 */
function createGrid(size) {
  // 1. 清除容器内所有现有子元素，避免元素累积
  container.innerHTML = '';

  // 2. 设置CSS Grid的行和列模板
  container.style.gridTemplateRows = `repeat(${size}, 1fr)`;
  container.style.gridTemplateColumns = `repeat(${size}, 1fr)`;

  // 3. 循环创建并添加网格单元格
  for (let i = 0; i < (size * size); i++) {
    let cell = document.createElement("div");
    cell.style.backgroundColor = "white";
    cell.style.border = "white solid 0.1px";
    cell.style.boxSizing = "border-box"; // 确保边框包含在单元格的指定尺寸内
    container.appendChild(cell);

    // 为每个单元格添加mouseover事件，根据当前选定的颜色进行绘制
    cell.addEventListener('mouseover', () => {
      cell.style.backgroundColor = currentColor;
    });
  }
}

/**
 * 提示用户输入新的网格尺寸，并重新创建网格。
 */
function setSize() {
  let x = prompt("What size grid? (Up to 100)");

  // 处理用户取消输入、输入空值或非数字的情况
  if (x === null || x.trim() === "" || isNaN(x)) {
    alert("Invalid input. Please enter a valid number.");
    return;
  }

  x = parseInt(x.trim()); // 将输入转换为整数并去除前后空格

  // 验证输入尺寸的范围
  if (x > 100 || x < 1) {
    alert("Grid size must be between 1 and 100.");
  } else {
    createGrid(x); // 使用新的尺寸创建网格
    currentColor = "pink"; // 重新设置网格后，将绘图颜色重置为默认的粉色
  }
}

// --- 初始设置和事件监听器绑定 ---

// 页面加载时创建默认的16x16网格
createGrid(16);

// 按钮事件监听器只绑定一次，在createGrid函数外部
eraserBtn.addEventListener('click', () => {
  currentColor = "white"; // 将绘图颜色设置为白色（橡皮擦模式）
});

pinkBtn.addEventListener('click', () => {
  currentColor = "pink"; // 将绘图颜色设置为粉色
});

resetBtn.addEventListener('click', () => {
  // 遍历所有网格单元格，将其背景色重置为白色
  const cells = container.querySelectorAll('div');
  cells.forEach(cell => {
    cell.style.backgroundColor = "white";
  });
  currentColor = "pink"; // 重置后将绘图颜色恢复为粉色
});

setSizeBtn.addEventListener('click', setSize); // 为设置尺寸按钮绑定事件