4 семестр / ЛР 5 ИТиП ОТЧЕТ
.pdf
МИНИСТЕРСТВО ЦИФРОВОГО РАЗВИТИЯ, СВЯЗИ И МАССОВЫХ КОММУНИКАЦИЙ РОССИЙСКОЙ ФЕДЕРАЦИИ
ОРДЕНА ТРУДОВОГО КРАСНОГО ЗНАМЕНИ ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
МОСКОВСКИЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ СВЯЗИ И ИНФОРМАТИКИ
Факультет СИ Кафедра ОиКК ЛАБОРАТОРНАЯ РАБОТА №5
по дисциплине «Информационные технологии и программирование»
Выполнила: Балыбердина Анастасия Максимовна студентка БИН2401 Проверила: Ефимичева Кристина Ильинична ассистентка кафедры ОиКК
Москва, 2026
Цель: изучение использования таймеров в языке JavaScript для создания анимации на Web-страницах, а также освоение методов смены изображений и перемещения элементов.
Рисунок 1 – Исходное отображение изображения на странице Создали HTML-документ и добавили изображение с помощью тега <img>,
задали начальный файл для отображения.
Рисунки 2а и 2б – Смена изображений с интервалом времени с использованием таймера
2
Реализовали автоматическую смену изображений с помощью функции обработчик события onclick для остановки таймера через clearInterval().
Рисунок 3 – Смена четырех изображений с использованием счетчика по модулю
Модифицировали программу: увеличили количество изображений и изменили выражение счётчика, используя операцию остатка от деления %, чтобы организовать циклическую смену.
Рисунки 4а и 4б – Результат работы программы при переключении изображений
Проверили корректную работу программы при отображении всех изображений по очереди.
3
Рисунок 5 – Начальное положение текстового слоя на странице Создали слой с текстом с использованием тега <div>, задали его позицию с помощью CSS-свойства position: absolute и начальные координаты.
Рисунок 6 – Перемещение текстового слоя по горизонтали Реализовали движение слоя, изменяя свойство left объекта style в функции,
вызываемой через setInterval(), добавили переменную направления движения и организовали смену направления при достижении границ.
4
Рисунок 7 – Код программы для перемещения изображения по вертикали В программе создана переменная положения pos и переменная направления изображение перемещается вверх и вниз в заданных пределах. Для запуска анимации используется функция setInterval(move, 50).
Рисунок 8 – Результат работы программы при вертикальном перемещении изображения
На странице изображение перемещается по вертикали в заданном диапазоне.
При достижении границ направление движения изменяется.
5
Рисунок 9 – Код программы для перемещения изображения по диагонали страницы
В программе используются координаты x и y. В функции move() одновременно изменяются свойства left и top, что позволяет реализовать движение изображения по диагонали. При выходе за границы координаты сбрасываются.
Рисунок 10 – Результат работы программы при диагональном перемещении изображения
6