Цветные квадраты HTML / Javascript - PullRequest
Новая
       1

Цветные квадраты HTML / Javascript

0 голосов
/ 17 декабря 2018

Вот текущий индекс (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, и использовать их функциональность.
  • Вам также потребуется создать 3 функции в файле JavaScript:
    1. function squareMouseMove(event)
    2. function squareMouseDown(event)
    3. function squareMouseUp(event)
    4. Добавить соответствующие глобальные переменные
    5. Изменить создание квадратов на добавленные наблюдатели для событий мыши, которые выполняют функции.

1 Ответ

0 голосов
/ 17 декабря 2018

Проблема с вашим кодом состоит в том, что квадраты пусты, поэтому они сворачиваются в ничто, и вы их не увидите.Добавьте ширину и высоту к ним, чтобы вы могли их видеть.

Другая проблема заключается в том, что вы указываете 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...