Question

我遇到了一些麻烦。我想在html中使用div对象，在这种情况下，使用id为“雪花”的div，克隆它，并将其附加到自身（将新雪花添加到原始的末尾，以便我现在有两个雪花）。有了这个，我希望能够使用math.random来调整雪花的位置。我该怎么做？最终我想用随机定位创建100个雪花。请让我知道一种方法，我可以做到这一点没有jquery（纯粹的javascript，CSS和HTML）。谢谢大家！

HTML

 <body>
  <div id=body>
   <!-- Snowflake -->
   <div id="snowflake">
    <div class="snowflake-container">
      ...
    </div>
  </div>
  <!-- New snowflake should go here -->
 </div>
</body>

JAVASCRIPT

var snowflake = document.getElementById("snowflake");
var bodyDiv = document.getElementById("body");
var snowflakeContainer = document.createElement('div');
var snowflakeClone = snowflake.cloneNode(true);

bodyDiv.addEventListener("click", createSnowflake);

function createSnowflake() {
  console.log("click is working");
  bodyDiv.appendChild(snowflakeClone);
 }

这有效，但它只创建一个雪花克隆。我想在每次点击页面时创建一个。

Answer 1

让我们清除杂乱无章，只处理问题的基本部分。

＆＃13;

// Get a reference to the snow flake container
var snowflake = document.querySelector(".snowflake-container");

// Set up a click event handler for the document
document.addEventListener("click", createSnowflake);

function createSnowflake() {
  // Clone the first snow flake container and append the clone to the body
  document.body.appendChild(snowflake.cloneNode(true));
}

＆＃13;

#snowflake {
  user-select:none; /* Prevents user from selecting content */
  background-image:url("http://ci.snowflake.az.us/wp-content/uploads/2015/10/cropped-snowflake-only-logo.png");
  background-size:contain;
  width:50px;
  height:50px;
}

＆＃13;

<!-- The container should be the outermost element -->
<div class="snowflake-container">
  <div id="snowflake"></div>
</div>

＆＃13;

克隆div并将其附加到正文

1 个答案: