Question

我正在尝试通过单击顶部和左侧位置为0-400的生成按钮，在现有的div中生成100个随机彩色框。另外，如果我将鼠标悬停在任何有颜色的框上，它会消失到最后一个框，这会提醒我最后一个框，最后一个框仍留着。

我设法创建了一个可以产生不同颜色的盒子，但是我不确定如何生成一个100（更不用说将鼠标悬停在上面）并删除盒子了，那怎么办？

我的HTML：

<!doctype html>
<html lang="en">
<head>
  <title> Generator </title>
  <meta charset="utf-8">
  <script src="prototype.js"></script>
  <script src="task4.js"></script>
  <style>
  #container {
    height: 500px;
  }

  p {
    width: 70px;
    height: 70px;
    background-color: rgb(100, 100, 255);
    border: solid 2px black;
    position: absolute;
  }
  </style>
</head>
<body>
  <div id="container">
</div>
<button id="myButton"
onclick="createBoxes()"> Generate More
</button>

</body>
</html>

我的JS

window.onload = function()
{
  createBoxes();
}
function createBoxes()
{
  var colors = ["red", "green", "blue", "purple", "yellow"];

  var newP = document.createElement("p");
  var top = 10 + "px";
  var left = 10 + "px";
  newP.style.top  = top;
  newP.style.left  = left;
  newP.style.backgroundColor = colors[ Math.floor( Math.random() *5 )];

  $("container").appendChild(newP);
}
window.onload = function() {
  createBoxes();

}

Answer 1

让我们逐步完成这项工作。

在创建框元素时，请勿使用p标签，div是此处的最佳选择。

据您所知，我已经执行了。如果我错过了什么，请在评论中告诉我。

我在代码中添加了注释，请检查是否得到

window.onload = function() {
  createBoxes();
}

function createBoxes() {
  var left = 0;
  var top = 0;
  var colors = ["red", "green", "blue", "purple", "yellow"];
  // create a for loop and run 99 times;
  for (var i = 1; i < 100; i++) {
    var newDiv = document.createElement("div");
    newDiv.classList.add('box')
    newDiv.style.backgroundColor = colors[Math.floor(Math.random() * 5)];
    newDiv.style.top = top + 'px';
    newDiv.style.left = left + 'px';
    // now add the event on this one;
    newDiv.addEventListener('mouseover', removeBoxes);
    $("#container").append(newDiv);
    left += 70; // increase left 70px each time in the loop
    if (i % 5 == 0) { // if the we have 5 boxes in one row, reset left to 0px and increase top property by 70px to get another row;
      left = 0;
      top += 70;
    }
  }
}

// function to remove the boxes on hover;
function removeBoxes() {
  $(this).remove();
}

// add the mouseover event listener;
$('div.box').on('mouseover', removeBoxes);

#container {
  min-height: 200px;
}

div.box {
  width: 70px;
  height: 70px;
  background-color: rgb(100, 100, 255);
  border: solid 2px black;
  display: inline-block;
  position: absolute;
  box-sizing: border-box;
}

#myButton {
  position: absolute;
  right: 0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
</div>
<button id="myButton" onclick="createBoxes()"> Generate 99 More
    </button>

随机盒发生器

1 个答案: