如何让div出现在用户点击的位置？

Question

我想要一个 div 填充有背景颜色和固定尺寸（宽度和高度）的屏幕，无论我点击哪里。但是，如果屏幕上有 10 个 div，我想在单击页面时停止创建 div，并有一条消息（警报）告诉我 "I'm done".

非常感谢。

Answer 1

参见下面的示例。

var numOfDivs = 0;

document.addEventListener("click", function (e) {
  if (numOfDivs < 10) {
    var d = document.createElement("DIV");

    d.style.top = e.clientY + "px";
    d.style.left = e.clientX + "px";

    document.body.appendChild(d);

    numOfDivs++;
  } else {
      alert("Done");
  }
});

div {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
  transform: translateX(-50%) translateY(-50%);
}

<html>
<body>
</body>
</html>

如何让div出现在用户点击的位置？

how to make divs appear at the location where user clicks?

javascript

jquery

html

background-color

countdown