Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/4: Рейтинг темы: голосов - 4, средняя оценка - 5.00
Mafia50000
0 / 0 / 2
Регистрация: 10.07.2016
Сообщений: 45
1

JavaScript

24.03.2017, 09:27. Просмотров 786. Ответов 2
Метки нет (Все метки)

Мне нужно сделать 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.
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
24.03.2017, 09:27
Ответы с готовыми решениями:

Вставка элементов меню (содержащих javascript) через javascript
Пишу курсовой проект по JavaScript в ходе которого потребовалось создать...

Выполнение Javascript файла в котором присутствуют javascript теги
text1.js &lt;link...

Как перезагрузить javascript, javascript-ом?
как с помощью javascript перезагрузить javascript ? Смысл в том что один из...

Javascript (codeacademy - "'WHILE' LOOPS IN JAVASCRIPT(Dragon Slayer!)")
Пожалуйста, помогите прочитать этот код!!! var slaying = true; // A bit of...

javascript внутри javascript
Здравствуйте. Помогите решить задачу. Нужно на html странице под спойлером в...

2
Padimanskas
Superposition
935 / 595 / 256
Регистрация: 27.10.2013
Сообщений: 2,067
24.03.2017, 12:02 2
Лучший ответ Сообщение было отмечено Mafia50000 как решение

Решение

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/
0
Mafia50000
0 / 0 / 2
Регистрация: 10.07.2016
Сообщений: 45
24.03.2017, 13:52  [ТС] 3
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 так, что бы сам квадрат не выходил за границы экрана.
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
24.03.2017, 13:52

Java и javascript. Передать переменную из Java в Javascript
Здравствуйте,уважаемые форумчане! Я начинающий программист. Разбираюсь в...

JavaScript
Функция selectDiv работает нормально, а вот selectLink нет. Выдает...

JavaScript
Создать страницу,в которой разместить 5 блоков размером 300 на 300...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru