По нажатию на кнопку появляется блок в случайном месте экрана с текущими координатами блока 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 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника 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, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .

@Справлюсь 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

Опции темы