js练枪小代码求答疑

Question

每隔1秒出现一个随机颜色的小方块点击消失 超过20个小方块提示失败
11太会写这个js的代码麻烦回答带个例子

Answer 1

“Devil组”引证GPT后的撰写：
以下是一个简单的实现你所描述的功能的 JavaScript 代码示例：

HTML 代码：

<div id="container"></div>
<div id="message"></div>

CSS 代码：

#container {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.box {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: red;
  cursor: pointer;
}

#message {
  font-size: 20px;
  font-weight: bold;
  color: red;
  text-align: center;
}

JavaScript 代码：

const container = document.getElementById("container");
const message = document.getElementById("message");

let count = 0;
const limit = 20;

function createBox() {
  if (count >= limit) {
    message.textContent = "You failed!";
    return;
  }

  const box = document.createElement("div");
  box.classList.add("box");
  box.style.top = Math.floor(Math.random() * (container.clientHeight - 20)) + "px";
  box.style.left = Math.floor(Math.random() * (container.clientWidth - 20)) + "px";
  box.style.backgroundColor = getRandomColor();
  box.addEventListener("click", () => {
    container.removeChild(box);
    count++;
  });

  container.appendChild(box);
  setTimeout(() => {
    container.removeChild(box);
    count++;
  }, 1000);
}

function getRandomColor() {
  return "#" + Math.floor(Math.random() * 16777215).toString(16);
}

setInterval(createBox, 1000);

这段代码将会在 container 元素中每秒钟创建一个随机颜色的小方块，点击小方块即可消失。当创建的小方块数量超过 limit 时，将会提示失败。