По нажатию на кнопку появляется блок в случайном месте экрана с текущими координатами блока JS

@Detok_tapocheck · Регистрация: 19.03.2020

Студворк — интернет-сервис помощи студентам

Через js надо
Нарисовать область размером 900 на 500px
Разместить кнопку «Вывести блок с координатами»
По нажатию на кнопку появляется блок в случайном месте экрана с текущими
координатами блока.
не получается сделать так,чтобы блоки выскакивали с координатами ,еще блоки вылетают за пределы высоты
помогите ПОЖОЖА !!!
вот что имею пока что

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html> 
<html> 
<head> 
<title>JS</title> 
<meta charset="utf-8"> 
</head> 
<body> 
<button id="moveImg">
«Вывести блок с координатами».
</button>
 
<div style="width: 900px; height: 500px; border: 1px solid #ccc;" id="targetDiv">
<img src="http://placehold.it/50x100" id="targetImg" style="display: none;">
</div>
<script> 
function randomInteger(min, max) {
    var rand = min - 0.5 + Math.random() * (max - min + 1)
    rand = Math.round(rand);
    return rand;
  }
 
function kickImg() {
  var w = document.getElementById("targetDiv").offsetWidth;
  var h = document.getElementById("targetDiv").offsetHeight;
  
  var dx = randomInteger(0, w-100);
  var dy = randomInteger(0, h-100);
  
  document.getElementById('targetImg').style.position = 'relative';
  document.getElementById('targetImg').style.display = 'block';
  document.getElementById('targetImg').style.top = dx+'px';
  document.getElementById('targetImg').style.left = dy+'px';
  
  console.log("dx = "+dx+", dy = " +dy);
}
 
document.getElementById('moveImg').addEventListener('click', kickImg);
 
</script>
 
</body> 
</html>

@Справлюсь · 17.04.2020, 20:14

Можете скинуть скрин как работает?

@Detok_tapocheck · 17.04.2020, 20:32 **[ТС]**

Справлюсь, вот только с координатами,там сейчас размер в блоке указывается. Типа нажимаешь кнопку вылетает в рандомном месте блок ,ну в пределах поля 500на900 . И каждый раз по нажатию новый блок с координатами x и у ,соответствующие блоку. Каждый раз новый блок,блок один на странице,как-то так

@Справлюсь · 17.04.2020, 20:37

Так вот ответ:
Или что-то не работает?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html> 
<html> 
<head> 
<title>JS</title> 
<meta charset="utf-8"> 
</head> 
<body> 
<button id="moveImg">
«Вывести блок с координатами».
</button>
 
<div style="width: 900px; height: 500px; border: 1px solid #ccc;" id="targetDiv">
<img src="http://placehold.it/50x100" id="targetImg" style="display: none;">
</div>
<script> 
function randomInteger(min, max) {
    var rand = min - 0.5 + Math.random() * (max - min + 1)
    rand = Math.round(rand);
    return rand;
  }
 
function kickImg() {
  var w = document.getElementById("targetDiv").offsetWidth;
  var h = document.getElementById("targetDiv").offsetHeight;
  
  var dx = randomInteger(0, w-100);
  var dy = randomInteger(0, h-100);
  
  document.getElementById('targetImg').style.position = 'relative';
  document.getElementById('targetImg').style.display = 'block';
  document.getElementById('targetImg').style.top = dx+'px';
  document.getElementById('targetImg').style.left = dy+'px';
  document.getElementById('targetImg').innerHTML = "dx = "+dx+", dy = " +dy;
  
  console.log("dx = "+dx+", dy = " +dy);
}
 
document.getElementById('moveImg').addEventListener('click', kickImg);
 
</script>
 
</body> 
</html>

@Detok_tapocheck · 18.04.2020, 01:28 **[ТС]**

Справлюсь, не работает,надо чтобы на блоках БЫЛИ ЗАПИСАНЫ КООРДИНАТЫ Х И У,которые соответствуют блоку,вылетающему в рандомное место. Плюс у меня почему-то за границы контура (500на900) выскакивают блоки ниже

@DrType · 18.04.2020, 01:56

Detok_tapocheck, 1) В строчках 31 — 32 поменяйте dx и dy местами; 2) какой у img может быть innerHTML? Сделайте блок с id="targetImg", в него вложите абзац, и вот

JavaScript
1
document.querySelector('#targetImg p').innerHTML = "dx = "+dx+", dy = " +dy;

@Detok_tapocheck · 18.04.2020, 02:09 **[ТС]**

DrType, второе не понятно ,что за абзац или абзац это ваше "и вот". Можете пожалуйста
редактировать и показать

@DrType · 18.04.2020, 10:51

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<body>
  <button id="moveImg">
    «Вывести блок с координатами».
  </button>
  <div style="width: 900px; height: 500px; border: 1px solid #ccc;" id="targetDiv">
    <div id="targetImg" style="display:none">
      <img src="http://placehold.it/50x100">
      <p></p>
    </div>
  </div>
  <script>
    function randomInteger(min, max) {
      var rand = min - 0.5 + Math.random() * (max - min + 1)
      rand = Math.round(rand);
      return rand;
    }
    function kickImg() {
      var w = document.getElementById("targetDiv").offsetWidth;
      var h = document.getElementById("targetDiv").offsetHeight;
      var dx = randomInteger(0, w - 100);
      var dy = randomInteger(0, h - 100);
      document.getElementById('targetImg').style.position = 'relative';
      document.getElementById('targetImg').style.display = 'block';
      document.getElementById('targetImg').style.top = dy + 'px';
      document.getElementById('targetImg').style.left = dx + 'px';
      document.querySelector('#targetImg p').innerHTML = "dx = " + dx + ",<br> dy = " + dy;
      console.log("dx = " + dx + ", dy = " + dy);
    }
    document.getElementById('moveImg').addEventListener('click', kickImg);
  </script>
</body>

@Detok_tapocheck · 19.04.2020, 19:25 **[ТС]**

а как так сделать ,чтобы внутри блока были координаты,а не под ним

Добавлено через 17 минут
а то у меня в блоке размер ,я пробую у меня либо под либо только координаты скачут без контура блока,а они типа там должны быть ,пожалуйста

@DrType · 19.04.2020, 19:58

Не знаю, как лучше сделать, можно так: в теге style прописать

CSS
1
2
3
4
5
6
#targetImg {
  width: 100px;
  height: 100px;
  overflow-y: scroll;
  border: 2px solid black;
}

В JS коде 23 строчку (в моём коде выше) заменить на

JavaScript
1
document.getElementById('targetImg').style.display = 'block';

@Detok_tapocheck · 19.04.2020, 20:01 **[ТС]**

Спасибо, уже сам сделал.

Новые блоги и статьи Все статьи Все блоги /
Отправка уведомления на почту при изменении наименования справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .	Контроль уникальности заводского номера - вариант №2 Maks 24.03.2026 В отличие от предыдущего варианта добавлено прерывание циклов, также добавлены новые переменные для сохранения контекста ошибки перед прерыванием цикла: Процедура ПередЗаписью(Отказ, РежимЗаписи,. . .
SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++ 8Observer8 24.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip	Жизнь в неопределённости kumehtar 23.03.2026 Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .	Модель здравоСохранения: работники работают быстрее после её введения. anaschu 23.03.2026 geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .	Контроль уникальности заводского номера - вариант №1 Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере нетипового документа выдачи шин для спецтехники с табличной частью, разработанного в конфигурации КА2. Данные берутся из. . .

@Справлюсь 76 / 36 / 17 Регистрация: 24.07.2014 Сообщений: 357
	17.04.2020, 20:14
	Можете скинуть скрин как работает? 0

@Detok_tapocheck 0 / 0 / 0 Регистрация: 19.03.2020 Сообщений: 12
	17.04.2020, 20:32 [ТС]
	Справлюсь, вот только с координатами,там сейчас размер в блоке указывается. Типа нажимаешь кнопку вылетает в рандомном месте блок ,ну в пределах поля 500на900 . И каждый раз по нажатию новый блок с координатами x и у ,соответствующие блоку. Каждый раз новый блок,блок один на странице,как-то так Миниатюры 0

@Detok_tapocheck 0 / 0 / 0 Регистрация: 19.03.2020 Сообщений: 12
	18.04.2020, 01:28 [ТС]
	Справлюсь, не работает,надо чтобы на блоках БЫЛИ ЗАПИСАНЫ КООРДИНАТЫ Х И У,которые соответствуют блоку,вылетающему в рандомное место. Плюс у меня почему-то за границы контура (500на900) выскакивают блоки ниже 0

@Detok_tapocheck 0 / 0 / 0 Регистрация: 19.03.2020 Сообщений: 12
	18.04.2020, 02:09 [ТС]
	DrType, второе не понятно ,что за абзац или абзац это ваше "и вот". Можете пожалуйста редактировать и показать 0

@Detok_tapocheck 0 / 0 / 0 Регистрация: 19.03.2020 Сообщений: 12
	19.04.2020, 19:25 [ТС]
	а как так сделать ,чтобы внутри блока были координаты,а не под ним Добавлено через 17 минут а то у меня в блоке размер ,я пробую у меня либо под либо только координаты скачут без контура блока,а они типа там должны быть ,пожалуйста 0

@Detok_tapocheck 0 / 0 / 0 Регистрация: 19.03.2020 Сообщений: 12
	19.04.2020, 20:01 [ТС]
	Спасибо, уже сам сделал. 0