每隔1秒出现一个随机颜色的小方块点击消失 超过20个小方块提示失败
11太会写这个js的代码麻烦回答带个例子
“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 时,将会提示失败。