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

时间:2016-06-08 18:45:57

标签: javascript jquery html background-color countdown

我想要一个填充了背景颜色的div,并且无论我点击哪里,屏幕上都会出现固定尺寸(宽度和高度)。但是,如果屏幕上有10个div,我想在点击页面时停止创建div并发出消息(提醒)告诉我"我' m完成"

非常感谢。

1 个答案:

答案 0 :(得分:4)

请参阅下面的示例。

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>