如何每点击一次创建一个圆点

要创建一个圆点，您需要使用HTML和CSS来创建一个圆形Div对象。然后，您需要使用JavaScript来处理每次点击事件并在单击事件处理程序中创建一个新的圆形Div。以下是实现此功能的示例代码：

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>创建圆点</title>
  <style>
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: red;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script src="script.js"></script>
</body>
</html>

CSS代码：

在CSS中，我们定义了一个名为“dot”的类，该类将元素渲染为一个圆形Div对象。我们还定义了该元素的位置属性。

JavaScript代码：

在JavaScript中，我们首先获取容器元素并为其添加单击事件监听器。然后，我们在单击事件处理程序中创建一个新的圆形Div对象，并将其添加到容器元素中。每次单击事件都会添加一个新的圆形Div对象。

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

container.addEventListener("click", function(event) {
  const dot = document.createElement("div");
  dot.className = "dot";
  dot.style.left = (event.pageX - 5) + "px";
  dot.style.top = (event.pageY - 5) + "px";
  container.appendChild(dot);
});