JavaScript

@Mafia50000 · Регистрация: 10.07.2016

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

Мне нужно сделать JavaScript, для меня это новый язык, я ещё с ним не разобрался. Подскажите как сделать вот это?
Написать JavaScript-функцию, которая при
наведении на блок будет генерировать два
случайных числа и перемещать этот блок по этим
координатам. Причём необходимо ограничить
перемещения таким образом, чтобы блок не выходил
за рамку экрана.
Высота блока - 100px, ширина - 200px, цвет – по
желанию разработчика, но с учётом цветовой
сочетаемости с фоном страницы.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML>
<html>
    <head>
        <meta charea="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Задание 1</title>
        
        
        <script>
        
        </script>
    </head>
    <body>
        <div class="blog"></div>
    </body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
*{
    margin: 0;
    padding: 0;
}
 
.blog{
    height: 100px;
    width: 200px;
    background: #000;
}

Как это прописать, просто я пока не знаю JS.

@Padimanskas · 24.03.2017, 12:02

Mafia50000,

JavaScript
1
2
3
4
5
6
7
8
9
function rand(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
 
let div = document.querySelector('div');
div.addEventListener('mouseenter', function(){
    this.style.top = rand(0, window.innerHeight - 30) + 'px';
  this.style.left = rand(0, window.innerWidth - 30) + 'px';
});

CSS
1
2
3
4
5
6
7
8
9
div {
  width: 30px;
  height: 30px;
  border: 1px solid;
  position: absolute;
  transition: all 0.6s;
  top: 0;
  left: 0;
}

HTML5
1
<div></div>

https://jsfiddle.net/0so5632y/

@Mafia50000 · 24.03.2017, 13:52 **[ТС]**

Padimanskas,
У меня после скрипта js, ошибка

JavaScript
1
2
3
4
5
6
7
8
9
    function rand(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
     
            let div = document.querySelector('div');
            div.addEventListener('onmousemove', function(){
                this.style.top = rand(0, window.innerHeight - 30) + 'px';
                this.style.left = rand(0, window.innerWidth - 30) + 'px';
        });

Uncaught TypeError: Cannot read property 'addEventListener' of null
Как исправить?

Добавлено через 5 минут
Ошибка исправлена, а можно ещё спросить как прописать js так, что бы сам квадрат не выходил за границы экрана.

Новые блоги и статьи Все статьи Все блоги /
Вывод данных через динамический список в справочнике Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .

JavaScript

Решение