ПР / Хакова Ю. М. Отчет ПР7
.docxМИНИСТЕРСТВО ЦИФРОВОГО РАЗВИТИЯ,
СВЯЗИ И МАССОВЫХ КОММУНИКАЦИЙ РОССИЙСКОЙ ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М.А. БОНЧ-БРУЕВИЧА»
(СПбГУТ)
Факультет Информационных технологий и программной инженерии
Кафедра Систем обработки данных
Направление: 09.03.02 Информационные системы и технологии
Профиль: Прикладные информационные системы и технологии
Практическое задание №7
«Использование объекта data в языке JavaScript»
по дисциплине
«ТFeРВП»
Выполнил:
студент группы ИСТ-223
Хакова Ю. М. «____» _________ 2025 г.
Принял:
ассистент кафедры СОД
Коровкина Е.В. «____» _________ 2025 г.
СОДЕРЖАНИЕ
Y
1 ХОД РАБОТЫ 3
2 ЛИСТИНГ INDEX.HTML 4
3 ЛИСТИНГ STYLE.CSS 4
4 ЛИСТИНГ SCRIPT.JS 5
5 ЗАКЛЮЧЕНИЕ 7
1 ХОД РАБОТЫ
Создаем файловую структуру проекта (Рисунок 1).
Рисунок 1 – файловая структура проекта
Файл index.html отвечает за структуру веб-страницы. В нём подключаются внешние файлы стилей (style.css) и сценария (script.js). В теле страницы размещены блоки для отображения текущей даты и времени, а также интерфейс для циклической смены изображений с вводом интервала и кнопкой запуска.
Файл style.css отвечает за оформление элементов страницы. В нём задаются отступы, шрифты, размеры изображений, оформление кнопок и других элементов интерфейса.
Файл script.js реализует интерактивную часть веб-приложения. В нём находятся функции для вывода текущей даты и времени на русском языке и их автоматическим обновлением каждую минуту, а также запуска процесса циклической смены изображений через заданный пользователем интервал времени
Файлы 1.jpeg, 2.jpeg, 3.jpeg и 4.jpeg, размещённые в папке images, используются в качестве графического материала для выполнения заданий.
2 ЛИСТИНГ INDEX.HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Практическая работа №7</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="date-time">
<div id="dat"></div>
<div id="time"></div>
</div>
<div class="image-switcher">
<img id="img" src="images/1.jpeg" alt="Смена изображения" />
<input type="number" id="interval" placeholder="Интервал в мс" />
<button onclick="startImageSwitch()">Запуск</button>
</div>
<script src="script.js"></script>
</body>
</html>
3 ЛИСТИНГ STYLE.CSS
body {
font-family: sans-serif;
padding: 20px;
background: #f5f5f5;
}
.date-time {
margin-bottom: 30px;
}
.image-switcher {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 300px;
}
input[type="number"] {
padding: 5px;
}
button {
padding: 8px 12px;
font-size: 16px;
}
img {
max-width: 100%;
height: auto;
}
4 ЛИСТИНГ SCRIPT.JS
function updateDateTime() {
const date = new Date();
let formattedDate = new Intl.DateTimeFormat('ru-RU', {
day: 'numeric',
month: 'long',
year: 'numeric',
weekday: 'long'
}).format(date);
document.getElementById('dat').textContent = 'Сегодня: ' + formattedDate;
let hours = date.getHours();
let minutes = date.getMinutes();
function getWordForm(n, wordForms) {
if (n % 10 === 1 && n % 100 !== 11) return wordForms[0];
if ([2, 3, 4].includes(n % 10) && ![12, 13, 14].includes(n % 100)) return wordForms[1];
return wordForms[2];
}
let hourWord = getWordForm(hours, ['час', 'часа', 'часов']);
let minuteWord = getWordForm(minutes, ['минута', 'минуты', 'минут']);
document.getElementById('time').textContent = `Сейчас: ${hours} ${hourWord} ${minutes} ${minuteWord}.`;
}
updateDateTime();
setInterval(updateDateTime, 60000);
let imgPaths = ['images/1.jpeg', 'images/2.jpeg', 'images/3.jpeg', 'images/4.jpeg'];
let imgIndex = 0;
let timerId = null;
function startImageSwitch() {
let interval = parseInt(document.getElementById('interval').value);
if (isNaN(interval) || interval <= 0) {
alert("Введите корректный интервал в миллисекундах.");
return;
}
if (timerId) clearInterval(timerId);
timerId = setInterval(() => {
imgIndex = (imgIndex + 1) % imgPaths.length;
document.getElementById('img').src = imgPaths[imgIndex];
}, interval);
}
5 ЗАКЛЮЧЕНИЕ
В ходе выполнения практической работы была разработана тестовая веб-страница, демонстрирующая использование объекта Date и взаимодействие с изображениями с использованием технологий HTML, CSS и JavaScript. Реализованы два задания: отображение текущей даты и времени и автоматическим обновлением информации каждую минуту, а также циклическая смена изображений через заданный пользователем интервал времени.
Санкт-Петербург
2025