彩色方块 HTML/Javascript答案

【问题标题】：Colored Squares HTML/Javascript彩色方块 HTML/Javascript
【发布时间】：2018-12-18 01:08:45
【问题描述】：

这是当前索引（HTML 和 JavaScript）：

var maxZ = 1000;
window.onload = function() {

  var add = document.getElementById("add");
  add.onclick = addSquare;

  var colors = document.getElementById("colors");
  colors.onclick = changeColors;

  var squareCount = parseInt(Math.random() * 21) + 30;
  for (var i = 0; i < squareCount; i++) {
    addSquare();
  }
}
//Generates color
function getRandomColor() {
  var letters = "0123456789abcdef";
  var result = "#";
  for (var i = 0; i < 6; i++) {
    result += letters.charAt(parseInt(Math.random() * letters.length));
  }
  return result;
}

function addSquare() {
  var square = document.createElement("div");
  var squareArea = document.getElementById("squareArea");
  square.className = "square";
  square.style.left = parseInt(Math.random() * 650) + "px";
  square.style.top = parseInt(Math.random() * 250) + "px";
  square.style.backgroundColor = getRandomColor();
  square.onclick = squareClick;
  squareArea.appendChild(square);
}

function changeColors() {
  var squares = document.querySelectorAll("#squareArea div");
  for (i = 0; i < squares.length; i++) {
    squares[i].style.backgroundColor = getRandomColor();
  }
}

function squareClick() {
  var oldZ = parseInt(this.style.zIndex);
  if (oldZ == maxZ) {
    this.parentNode.removeChild(this);
  } else {
    maxZ++;
    this.style.zIndex = maxZ;
  }
}

<html>

<head>
  <title>Colored Squares</title>
  <script src="Squares.js" type="text/javascript"></script>
  <link href="Squares.css" type="text/css" rel="stylesheet" />
</head>

<body>
  <div id="squareArea"></div>
  <div>
    <button id="add">Add Square</button>
    <button id="colors">Change Color</button>
  </div>
  <p>Click a square to move it to the front.</p>
</body>

</html>

这是目标：

编辑彩色方块以添加以下功能。

用户将能够单击一个正方形并将其拖动到屏幕上的任何位置。 - 当用户放开点击时，它将停留在那个位置。
为了实现这一点，您需要将 Prototype 和 Scriptaculous 添加到 html 中加载的脚本并使用它们的功能。
您还需要在 JavaScript 文件中创建 3 个函数：
1. 函数squareMouseMove(event)
2. 函数squareMouseDown(event)
3. 函数squareMouseUp(event)
4. 添加适当的全局变量
5. 更改方块的创建，为执行函数的鼠标事件添加观察者。

【问题讨论】：

其实试着做你的功课，然后当你遇到困难时发布一个问题。没有人会尝试阅读这篇文章并为你做。
我做到了。这就是我卡住的地方。我做了索引和当前的 Javascript。我需要帮助尝试将这些函数添加到 Javascript。
欢迎来到 SO Mike，以后请尝试花更多的时间来处理您的问题的格式 - 如果您懒得格式化和校对您的问题，我们为什么要花时间来回答它?
对不起，我试图弄清楚如何做到这一点。我不太擅长这个。
您错过了提出问题并发布您到目前为止所做的事情。请describe the problem 以及到目前为止为解决它所做的工作。请澄清您的具体问题。请参阅How to Ask 页面以获得澄清此问题的帮助。

标签： javascript html dom

【解决方案1】：

您的代码存在的问题是正方形是空的，因此它们会折叠成虚无，您将看不到它们。为它们添加宽度和高度，以便您可以看到它们。

另一个问题是您指定了left 和right，但除非您将它们设为绝对定位，否则这些属性将不起作用。

这是您添加的使用width、height 和position 属性的代码：

var maxZ = 1000;
window.onload = function() {

  var add = document.getElementById("add");
  add.onclick = addSquare;

  var colors = document.getElementById("colors");
  colors.onclick = changeColors;

  var squareCount = parseInt(Math.random() * 21) + 30;
  for (var i = 0; i < squareCount; i++) {
    addSquare();
  }
}
//Generates color
function getRandomColor() {
  var letters = "0123456789abcdef";
  var result = "#";
  for (var i = 0; i < 6; i++) {
    result += letters.charAt(parseInt(Math.random() * letters.length));
  }
  return result;
}

function addSquare() {
  var square = document.createElement("div");
  var squareArea = document.getElementById("squareArea");
  square.className = "square";
  square.style.left = parseInt(Math.random() * 650) + "px";
  square.style.top = parseInt(Math.random() * 250) + "px";
  square.style.width = "100px";
  square.style.height = "100px";
  square.style.position = "absolute";
  square.style.backgroundColor = getRandomColor();
  square.onclick = squareClick;
  squareArea.appendChild(square);
}

function changeColors() {
  var squares = document.querySelectorAll("#squareArea div");
  for (i = 0; i < squares.length; i++) {
    squares[i].style.backgroundColor = getRandomColor();
  }
}

function squareClick() {
  var oldZ = parseInt(this.style.zIndex);
  if (oldZ == maxZ) {
    this.parentNode.removeChild(this);
  } else {
    maxZ++;
    this.style.zIndex = maxZ;
  }
}

<html>

<head>
  <title>Colored Squares</title>
  <script src="Squares.js" type="text/javascript"></script>
  <link href="Squares.css" type="text/css" rel="stylesheet" />
</head>

<body>
  <div id="squareArea"></div>
  <div>
    <button id="add">Add Square</button>
    <button id="colors">Change Color</button>
  </div>
  <p>Click a square to move it to the front.</p>
</body>

</html>

【讨论】：

我怎样才能让他们能够被拖动？
您需要为此编写代码。那是你的任务，不是我们的。我们是来帮助你的，而不是为你做的。