Россия, с. Починки
СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
Был в сети 19.11.2024 10:50
Храмушин Михаил Васильевич
Преподаватель
34 года
6 868
7 306 
Местоположение
Специализация
Практическая работа №28 Проектирование и дизайн ИС
Категория:
Информатика
26.11.2021 08:57
Просмотр содержимого документа
«Практическая работа №28 Проектирование и дизайн ИС»
Практическое занятие №28
Тема: Создание аналоговых часов по средствам CSS
Цель работы: Создание аналоговых часов
Приобретаемые умения и навыки: Умение работать с СSS
Норма времени: 2 часа.
Оборудование: Компьютер с установленным программным обеспечением и подключенный к Internet
Сегодня мы поэкспериментируем с css переменными и попробуем с помощью них создать аналоговые часы. Не смотря на то что CSS переменные очень удобно использовать, все же их нужно использовать с умом, ведь каждый раз при изменении переменной вы вызываете перерисовку каждого элемента, который ее использует, тем самым загружает браузер.
Мы перед собой поставим задачу создать аналоговые часы, который не будут вызывать перерисовку страницы и полагаться на JavaScript для вычисления положения стрелки. Часы которые не будут никак влиять на частоту кадров в браузере. Среди всех нам известных CSS свойств, только одно позволяет трансформировать элемент без перерисовки — transform. Значит его и будем использовать.
Ход работы
Файл HTML
Давайте создадим стандартный HTML файл, в него мы поместим тег «time» с классом clock (этот тег у нас будет основным)
Справочник
| Тег HTML используется для обозначения текста как временной точки (времени, либо даты и времени) или временного периода. Внутри тега time время указывается в человеко-понятном формате. Атрибут datetime тега содержит дату и время в машиночитаемом формате. Тег может содержать как точную дату и время (временную точку), например, "среда 18:30", так и промежуток (период, отрезок) времени, например, "2 дня 3 часа".
Тег также поддерживает глобальные атрибуты в HTML. (class, accesskey, id, style и др.)
|
В тег time (он у нас будет служить своего рода контейнером) мы будем помещать теги span с классом clock__stroke clock__stroke--small clock__stroke—1
Они у нас будут отвечать за минуты в наших часах
.
А каждую пятое деление мы будем обозначать иначе: тег span с классом clock__stroke clock__stroke--5 
Внимание!!! Цифра в конце каждого класса будет обозначать деление на часах, всего делений на часах 60.
Помимо «делений» мы поместим в тег time еще три тега span которые будут отвечать за часовую, минутную и секундную стрелку.
Файл CSS
Теперь давайте займемся стилистикой часов. Стиль мы будем делать простой.
Первое что мы сделаем это зададим контур часов:
Результат должен быть таким:
Далее с помощью селектора clock и псевдоселектора after зададим область (цетральная) куда в будущем будут помещаться наши стрелки
Далее зададим тоже предварительные настройки для наших стрелок (без этих настроек стрелки не будут двигаться)
Теперь давайте создадим наше первое деление, с него будет все начинаться и сразу зададим настройки для секундной стрелки в которых укажем как наша секундная стрелка будет смещаться отсчитываю каждую секунду.
Результат: 
Помимо основного деления нам нужно еще добавить 59 делений. Основной принцип создания делений на часах будет мало чем отличаться друг от друга, единственное отличие это смещение в градусах которое позволит распределить все наши деления в равном друг от друга расстоянии.
Создайте еще таких 58 штук, но при добавлении следующей градус смещения для следующего деления будет прибавляться на 6, также не забывайте про порядковый номер деления .clock__stroke—1
Результат должен быть таким:
Следующим шагом мы добавим часовую стрелку:
Результат должен быть таким:
Далее мы аналогичным способом добавляем минутную стрелку:
Результат будет таким:
Следующим шагом мы задаем секундную стрелку
Стрелка добавилась но без анимации они будут стоять
Последним шагом мы зададим правила анимации, за какой промежуток времени каждая наша стрела должна пройти целый круг
Но это же не наше время.
И так наше начальное время 00:00:00 потому что все стрелки начинают анимацию с 0 градусов. Чтобы начинать с настоящего времени нам нужно рассчитывать начальный градус отдельно для каждой стрелки относительно времени. И так у нас два варианта, либо на стороне сервера рендерить CSS относительно времени запроса, либо использовать JavaScript. Конечно сервер рендеринг и без скриптовые часы это круто, но ради подтверждения концепта мы все же используем JavaScript.
Создайте файл JavaScript, используйте этот скрипт и не забудьте подключить его в HTML. Тогда ваши часы будут показывать правильное время!
| var date = new Date(), hours = date.getHours(), minutes = date.getMinutes(), seconds = date.getSeconds();
if (hours 12) { hours -= 12; }
var secondsStartDegree = 360 / 60 * seconds, minutesStartDegree = 360 / 60 * minutes + 6 / 60 * seconds, hoursStartDegree = 360 / 12 * hours + 30 / 60 * minutes + 0.5 / 60 * seconds;
var style = document.createElement('style');
style.type = 'text/css'; style.innerHTML = '\ @keyframes clock-hand-rotate--hour {\ from {transform: rotate(' + hoursStartDegree + 'deg)}\ to {transform: rotate(' + (hoursStartDegree + 360) + 'deg)}\ }\ @keyframes clock-hand-rotate--minute {\ from {transform: rotate(' + minutesStartDegree + 'deg)}\ to {transform: rotate(' + (minutesStartDegree + 360) + 'deg)}\ }\ @keyframes clock-hand-rotate--second {\ from {transform: rotate(' + secondsStartDegree + 'deg)}\ to {transform: rotate(' + (secondsStartDegree + 360) + 'deg)}\ }\ .clock__hand--hour {\ animation: clock-hand-rotate--hour 43200s linear infinite;\ }\ .clock__hand--minute {\ animation: clock-hand-rotate--minute 3600s linear infinite;\ }\ .clock__hand--second {\ animation: clock-hand-rotate--second 60s steps(60) infinite;\ }';
document.getElementsByTagName('head')[0].appendChild(style); |
Вебинар для учителей
Свидетельство об участии БЕСПЛАТНО!
