Современные технологии производства СМИ. 4 курс. Практическое занятие №4. Простой виджет часов

Для создания простого виджета часов вам потребуется:

CSS, JavaScript, HTML, а также подключенные библиотеки Vue и CSS.

Часть I. Стили страницы в CSS:

1) Указываем фоновый градиент с переходами цвета - сначала цвет центра модуля, потом - фоновый:

body {
  background: radial-gradient(ellipse at center, центр 0%, фон 70%);
  background-size: 100%;
  }

2) Отступы в виджете:

p {
  margin: 0;
  padding: 0;
}

3) В идентификаторе часов задаем шрифт, отступы сверху и слева (в моем примере - 50% и 45% соответственно):

#clock {
  font-family: "Share Tech Mono", monospace;
  color: #ffffff;
  text-align: center;
  position: absolute;
  left: ?%;
  top: ?%;
  transform: translate(-50%, -50%);
  color: #daf6ff;
  text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}

4) Параметры отступов в элементах часов:

#clock .time {
  letter-spacing: 0.05em;
  font-size: 80px;
  padding: 5px 0;
}
#clock .date {
  letter-spacing: 0.1em;
  font-size: 24px;
}
#clock .text {
  letter-spacing: 0.1em;
  font-size: 12px;
  padding: 20px 0 0;
}

5) Создаем класс контейнера с высотой и логикой отображения:
   
.container {
  display: flex;
  height: 800px;
  }

Часть II. JavaScript:

6) Для отображения реального времени потребуется динамическая функция часов. (размещается в пункте 13):

var clock = new Vue({
    el: '#clock',
    data: {
        time: '',
        date: ''
    }
});

var week = ['ВС', 'ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ'];
var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() {
    var cd = new Date();
    clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
    clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
};

function zeroPadding(num, digit) {
    var zero = '';
    for(var i = 0; i < digit; i++) {
        zero += '0';
    }
    return (zero + num).slice(-digit);
}


Часть III. HTML:

7) Указываем стандартные теги и заголовок:

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Модуль часов</title>

8) Встраиваем минимальный стандарт библиотеки CSS. Взять ее можно здесь: https://raw.githubusercontent.com/Dmitrykonn/specimen/refs/heads/master/clocknormalizer.css

9) Подключаем шрифт. Если будете использовать другой, то укажите ссылку на него на сайте fonts.googleapis.com:

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Share+Tech+Mono'>

10) Встраиваете ваш CSS, закрываете  </head>

11) Внутри  <body> разворачиваем класс контейнера и идентификатор часов. Здесь же вписываем текст в соответствующем блоке:

    <div class="container">
  <div id="clock">
    <p class="date">{{ date }}</p>
    <p class="time">{{ time }}</p>
    <p class="text">ваш текст</p>
</div>
   </div>

12) Встраиваем стандарт библиотеки Vue:
          
    <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>

13) Встраиваете ваш JavaScript

14) Закрываете оставшиеся теги </body>  и </html>

Если все верно, то ваша страница будет выглядеть примерно так: https://konoplevdigital.blogspot.com/p/clock-module.html

Рекомендуемая тема: Soho neon с отключенной фоновой картинкой.

Ссылки на выполненное задание принимаются в комментариях к этому посту до 17:00 7 ноября.



Комментарии

  1. Яна Петривная4 ноября 2025 г. в 00:12

    https://yanniiish.blogspot.com/2025/11/4.html

    ОтветитьУдалить
  2. Елизавета Ухарских, ФЖ-2014 ноября 2025 г. в 02:40

    https://eufzh-401.blogspot.com/2025/11/4.html

    ОтветитьУдалить
  3. Виктор Мельников5 ноября 2025 г. в 09:54

    https://babzuniss.blogspot.com/2025/11/4.html

    ОтветитьУдалить
  4. Kristina Smotrova6 ноября 2025 г. в 02:34

    Этот комментарий был удален автором.

    ОтветитьУдалить
  5. Daniil6 ноября 2025 г. в 10:30

    Шагивалеев

    https://danyashagivaleyevlll.blogspot.com/2025/11/4_6.html

    ОтветитьУдалить
  6. Роман Мельничук6 ноября 2025 г. в 23:03

    https://generalkotly.blogspot.com/2025/11/blog-post.html

    ОтветитьУдалить
    Ответы
    1. Dmitry Konoplev7 ноября 2025 г. в 04:46

      Оценка "хорошо" - не изменена тема и виджет снес верстку страницы.

      Удалить
  7. Виктория Аккерман7 ноября 2025 г. в 02:20

    https://akkermanfzh401.blogspot.com/2025/11/0711.html

    Долг по заданию за 30.09: https://akkermanfzh401.blogspot.com/2025/11/3009-2-google-material.html

    ОтветитьУдалить
  8. Полина Горбунова ФЖ-3017 ноября 2025 г. в 02:49

    https://polinagorbunova401.blogspot.com/2025/11/4-4.html

    ОтветитьУдалить
    Ответы
    1. Dmitry Konoplev7 ноября 2025 г. в 04:48

      Оценка "хорошо", у виджета неверно выставлен отступ сверху.

      Удалить
  9. Полина Горбунова ФЖ-3017 ноября 2025 г. в 04:08

    Долг https://polinagorbunova401.blogspot.com/2025/11/4-3-3d-parallax.html

    ОтветитьУдалить
  10. Виктор Мельников7 ноября 2025 г. в 05:04

    долг https://babzuniss.blogspot.com/2025/09/mash-up-rss.html

    ОтветитьУдалить
  11. Kristina Smotrova7 ноября 2025 г. в 05:33

    https://smotrikisa.blogspot.com/2025/11/buttonhrinputoverflowvisibleaudiocanvas.html

    ОтветитьУдалить

Добавлять новые комментарии запрещено.

Популярные сообщения