Задачи по JavaScript

Задачи javascript на события мыши и клавиатуры

Задача 1

Выведите координаты мыши относительно блока в момент движения курсора мыши внутри блока. Координаты выводить под блоком.

Задача 2

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

Задача 3

Добавьте в документ 300-400 блоков div квадратной формы с размерами сторон 30px, и цветом фона. Добавление элементов выполните с помощью цикла. Добавьте событие при наведении мыши, которое будет скруглять данные блоки с помощью border-radius до круга.

Для замедления эффекта скругления в CSS можно добавить transition.

Задача 4

Создайте div размерами ширина – 100%, высота 250px. Ниже добавьте 4-5 изображений с одинаковыми классами, разного размера. Добавьте событие, которое будет при клике на изображении устанавливать его фоном блока div со свойством background-size: contain.

Задача 5

Создайте блок размерами 50x50px. Добавьте событие клик, так, что при каждом клике на блоке он отодвигается на 100px вниз от предыдущего положения.

Задача 6

Реализуйте триггер переключатель следующего вида:

Изображение переключателя

Поведение триггера:

  • При загрузке переключатель находится в первом положении
  • При клике, он переходит в положение два (средняя картинка), а в консоль выводится цифра 1
  • При следующем клике переключатель переходит в состояние три(нижняя картинка), а в консоль выводится цифра 2
  • При следующем клике, переключатель переходит в состояние 1 (верхняя картинка), а в консоль выводится 0

Задача 7

Добавьте на страницу таблицу в стандартном оформлении. При клике на таблице добавьте ей класс bordered, при втором клике удалите класс bordered и добавьте класс striped, при третьем клике удалите класс striped и добавьте класс highlight.

Для увеличения наглядности, подключите фреймворк materialize.

Задача 8

Модифицируйте задачу 7. Добавьте три radiobutton. При выборе первого включается класс bordered, при выборе второго отключается bordered и включается striped, при выборе третьего включается highlight и отключается striped.

Задача 9

Измените radiobuttons в задаче 8 на checkbox. При выборе checkbox включается соответствующий класс. Теперь несколько классов могут включаться одновременно.

Задача 10

​Создайте кнопку. При нажатии на кнопку с помощью элемента this выведите содержащийся в тегах кнопки текст. Вывод осуществлять с помощью alert.

Примечание: <button>​Именно этот текствыводить</button>.​ Напомню, что получить данный текст можно с помощью this.innerHTML.

Создайте кнопку отключающую события на предыдущей кнопке.

Задача 11

Создайте элементы div, p, button, a. Используя target по клику выводите информацию о типе элемента по которому произошел клик.

Задача 12

Создайте три div идущих подряд. Пусть они вложены в общего родителя (другой блок div). С помощью relatedTarget выведите в элемент запись о переходах мыши между этими блоками.

Задача 13

​Используя event which \ button напишите программу, которая будет оповещать пользователя о том, какой кнопкой мыши он кликнул на блоке.

событие onclick

Задача 14

Изменить размер изображения по клику мыши. Задание 2. Изменить прозрачность изображения по клику мыши на 10%. Последующие клики увеличивают прозрачность с шагом 10%.

Задача 15

Выполните задачу 14 с помощью onmousemove. Шаг изменения 0.2%.

Onmouseover & onmouseout

Задача 16

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

Задача 17

Используя код из первой задачи, сделайте увеличение изображения при наведении мыши на 40%. После выхода мыши за пределы изображения – оно восстанавливает свои размеры.

Задача 18

Используя событие onclick реализовать аналог fancybox. При клике – картинка увеличивается в размерах и всплывает над контентом. Остальной контент затемняется. Для «всплывания» изображения используйте position:absolute.