отображать слова в произвольном положении по клику, в контейнере на мобильном телефоне - PullRequest
Новая
       18

отображать слова в произвольном положении по клику, в контейнере на мобильном телефоне

0 голосов
/ 25 мая 2018

Вчера я задал этот вопрос , и мне было предложено задать новый, чтобы получить точный ответ.

Мой код отображает слова на странице при нажатии кнопки.

Это работает отлично, возможно ли поместить его в контейнер?

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

Просто, чтобы попытаться, я попытался поместить его в поле размером 300x300 пикселей, но слова появляются везде.Возможно ли это либо с помощью сетки начальной загрузки, либо с помощью каких-либо медиа-запросов, или, как я делал с любым контейнером?Или это другое правило JavaScript?

Еще раз спасибо! 

var words = [
  'Hello',
  'No',
  'Hi',
  'Banana',
  'Apple'
];
var visible = 0;

document.querySelector("form").addEventListener("submit", function(e) {
  e.preventDefault();

  var fullWidth = window.innerWidth;
  var fullHeight = window.innerHeight;

  var elem = document.createElement("div");
  elem.textContent = words[visible];
  elem.style.position = "absolute";
  elem.style.left = Math.round(Math.random() * fullWidth) + "px";
  elem.style.top = Math.round(Math.random() * fullHeight) + "px";
  document.body.appendChild(elem);

  visible++;
});
<form>
  <input type="submit">
</form>

1 Ответ

0 голосов
/ 25 мая 2018

Я немного изменил твой код, таким образом должен работать. 

var words = ['Hello','No','Hi','Banana','Apple'];
var visible = 0;
var container = document.getElementById("container");
var containerWidth = container.offsetWidth;
var containerHeight = container.offsetHeight;

document.querySelector("form").addEventListener("submit", function(e) {
  e.preventDefault();

  var elem = document.createElement("div");
  
  elem.className = "elem";
  elem.textContent = words[visible];
  
  document.body.appendChild(elem); // to get div sizes

  var left = Math.round(Math.random() * containerWidth); 
  var maxRight = containerWidth - (left + elem.offsetWidth + 5);
  
  if (maxRight < 0) {
    left -= Math.abs(maxRight);
  }

  var top = Math.round(Math.random() * containerHeight); 
  var maxBottom = containerHeight - (top + elem.offsetHeight + 5);
  
  if (maxBottom < 0) {
    top -= Math.abs(maxBottom);
  }

  elem.style.left = left + "px";
  elem.style.top = top + "px";
  
  container.appendChild(elem);

  visible++;
  
});
#container {
  border: 1px solid black;
  height: 500px;
  width: 500px;
  position: relative;
}

.elem {
  display: inline-block;
  position: absolute;
}
<form>
  <input type="submit">
</form>

<div id="container"></div>
...