许愿树——每个人都有一个新年愿望

2023-11-10 20:22:48

虎年即将来临，小朋友和大朋友们都有大大小小的愿望。来吧，作为前端小小白的我用 CSS+JS 写了一个新春许愿墙。

首先，我们创建一个 HTML 文件并将其命名为 "许愿墙.html"。

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>许愿树</h1>
  <div id="wish-tree"></div>

  <script src="script.js"></script>
</body>
</html>

接下来，我们创建一个 CSS 文件并将其命名为 "style.css"。

#wish-tree {
  width: 500px;
  height: 500px;
  background-image: url("tree.png");
  background-size: cover;
}

.wish {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  background-color: #ffffff;
  color: #000000;
  font-size: 16px;
}

最后，我们创建一个 JavaScript 文件并将其命名为 "script.js"。

const wishTree = document.getElementById("wish-tree");

wishTree.addEventListener("click", (e) => {
  const wish = document.createElement("div");
  wish.classList.add("wish");
  wish.textContent = "我的新年愿望是...";

  const x = e.clientX - wishTree.getBoundingClientRect().left;
  const y = e.clientY - wishTree.getBoundingClientRect().top;

  wish.style.left = `${x}px`;
  wish.style.top = `${y}px`;

  wishTree.appendChild(wish);
});