Question

以下是当前索引（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. 将正方形的创建更改为为执行功能的鼠标事件添加观察者。

Answer 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>

彩色方块HTML / Javascript

1 个答案: