как сделать так, чтобы div отображался в том месте, где пользователь нажимает?

Я хочу, чтобы div был заполнен цветом фона, а фиксированные размеры (ширина и высота) отображались на экране везде, где я нажимаю. Однако, если на экране 10 div, я хочу перестать создавать div, когда я нажимаю на страницу и получаю сообщение (предупреждение), говорящее мне, что «я готов».

Большое спасибо.


javascript html background-color jquery countdown
person SimpleFuzz    schedule 08.06.2016    source источник
comment
Привет, добро пожаловать в переполнение стека. Вероятность получить хороший ответ значительно возрастет, если вы сможете предоставить фактический код, показывающий, что вы уже сделали. (Трудно сказать, что вы хотите от вопроса)   -  person kthornbloom    schedule 08.06.2016
comment
Звучит довольно круто! Не могу дождаться, чтобы увидеть, что вы пробовали до сих пор. Пожалуйста, разместите соответствующий код.   -  person mferly    schedule 08.06.2016

Ответы (1)


arrow_upward
4
arrow_downward

См. пример ниже.

var numOfDivs = 0;

document.addEventListener("click", function (e) {
  if (numOfDivs < 10) {
    var d = document.createElement("DIV");

    d.style.top = e.clientY + "px";
    d.style.left = e.clientX + "px";

    document.body.appendChild(d);

    numOfDivs++;
  } else {
      alert("Done");
  }
});
div {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
  transform: translateX(-50%) translateY(-50%);
}
<html>
<body>
</body>
</html>

person Kian Cross    schedule 08.06.2016
comment
Я бы добавил преобразование: translateX(-50%) translateY(-50%); к элементам css. Тогда вам не нужно минус 25 пикселей, и вам просто нужно установить верхнее и левое значение. Делает его немного легче управляемым и читаемым :) - person user3528269; 08.06.2016
comment
@user3528269 user3528269 Хорошая идея :) Я добавил это. - person Kian Cross; 08.06.2016