Главная
Проекты на Vue
Аналоговые часы с темной темой

Аналоговые часы с темной темой

Создание интерактивных, «живых» элементов интерфейса — задача, которая с Vue.js превращается из сложной технической проблемы в увлекательный и логичный процесс. Реактивность, декларативная привязка данных и компонентный подход позволяют легко описывать сложное поведение, сосредотачиваясь на логике, а не на ручных манипуляциях с DOM. Идеальная иллюстрация этого — создание интерактивных часов, которые не только показывают точное время, но и мгновенно реагируют на действия пользователя, например, на смену темы. Именно такой компонент вы видите ниже.

Мы назвали этот компонент «Часы-переключатель», так как он сочетает в себе элегантные аналоговые часы, цифровое время, дату и кнопку переключения между светлой и темной темой — все в одном реактивном компоненте.

{{ calcHours }}:{{ calcMinutes }}

{{ date }} {{ month }}, {{ day }}

<div id="app" class="app">
  <div class="app__clock" :class="{dark: themeToggle}">
    <button class="app__clock-btn" :class="{dark: !themeToggle, light: themeToggle}" @click.prevent="themeToggle = !themeToggle"></button>
    <div class="app__clock-face">
      <template v-for="line,i in 12">
        <div class="line" :class="{dark: !themeToggle}" :style="`transform: rotate(${i*30}deg)`"></div>
      </template>
      <div class="hour-hand" :class="{dark: !themeToggle}" :style="`transform: translateY(-2px) rotateZ(${scale(hours%12,0,11,0,360)-90}deg)`"></div>
      <div class="minute-hand" :class="{dark: !themeToggle}" :style="`transform: translateY(-1px) rotateZ(${scale(minutes,0,59,0,360)-90}deg)`"></div>
      <div class="second-hand" :style="`transform: translateY(-.5px) rotate(${scale(seconds,0,59,0,360)-90}deg)`"></div>
      <div class="center" :class="{dark: !themeToggle}"></div>
    </div>
    <div class="app__clock-time">
      {{ calcHours }}:{{ calcMinutes }}
    </div>
    <div class="app__clock-text">
      <span class="app__clock-date">{{ date }}</span> {{ month }}, {{ day }}
    </div>
  </div>
</div>

.app {
  --tr: .3s ease-in-out;
  position: absolute;
  inset: 0;
}
.app__clock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  transition: background-color var(--tr);
}
.app__clock-btn {
  margin-block-end: 100px;
  font-size: clamp(24px, 1.3261rem + 0.8696vi, 32px);
  border-radius: 6px;
  transition: var(--tr);
  transition-property: background-color, color;
}
.app__clock-btn:focus-visible {
  outline: none;
}
.app__clock-btn.dark, .app__clock-btn.light {
  --w: 40px;
  width: var(--w);
  height: var(--w);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90%;
}
.app__clock-btn.light {
  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E");
}
.app__clock-btn.dark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401'/%3E%3C/svg%3E");
}
.app__clock-face {
  position: relative;
  width: 150px;
  height: 150px;
  margin-block-end: 50px;
}
.app__clock-face > * {
  position: absolute;
}
.app__clock-face .line {
  left: 50%;
  top: 50%;
  width: 60%;
  height: 0px;
  background-color: #fff;
  transform-origin: left center;
  transition: background-color var(--tr);
}
.app__clock-face .line::before {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background-color: inherit;
  border-radius: 100vw;
}
.app__clock-face .hour-hand {
  --w: 4px;
  width: 40%;
  height: var(--w);
  left: 50%;
  top: 50%;
  transform-origin: left center;
  background-color: #fff;
  transition: var(--tr);
  transition-property: transform, background-color;
}
.app__clock-face .minute-hand {
  --w: 2px;
  height: var(--w);
  left: 50%;
  top: 50%;
  transform-origin: left center;
  width: 50%;
  background-color: #fff;
  transition: var(--tr);
  transition-property: transform, background-color;
}
.app__clock-face .second-hand {
  --w: 2px;
  width: 50%;
  height: var(--w);
  left: 50%;
  top: 50%;
  transform-origin: left center;
  background-color: #E74C3C;
  transition: transform var(--tr);
}
.app__clock-face .center {
  --w: 10px;
  aspect-ratio: 1/1;
  width: var(--w);
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 2px solid #E74C3C;
  border-radius: 100vw;
  transition: background-color var(--tr);
}
.app__clock-time {
  font-size: clamp(48px, 1.6522rem + 1.7391vi, 64px);
  transition: color var(--tr);
}
.app__clock-text {
  font-size: clamp(24px, 1.3261rem + 0.8696vi, 32px);
  transition: color var(--tr);
}
.dark {
  color: #fff !important;
  background-color: #000 !important;
}

const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
const days = ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота']
const {createApp, ref, computed, onMounted} = Vue
createApp({
    setup(){
        const themeToggle = ref(false)
        const month = ref('')
        const date = ref('')
        const day = ref('')
        const hours = ref('')
        const minutes = ref('')
        const seconds = ref('')
        const calcHours = computed(()=>{
			return String(hours.value).length === 1 ? `0${hours.value}` : hours.value
		})
		const calcMinutes = computed(()=>{
			return String(minutes.value).length === 1 ? `0${minutes.value}` : minutes.value
		})
        const setTime = ()=>{
			let new_date = new Date()			
			month.value = months[new_date.getMonth()]			
			date.value = new_date.getDate()
			day.value = days[new_date.getDay()]			
			hours.value = new_date.getHours()			
			minutes.value = new_date.getMinutes()			
			seconds.value = new_date.getSeconds()
		}
		const scale = (num, in_min, in_max, out_min, out_max)=>{
			return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
		}
        onMounted(()=>{
            setTime()
            setInterval(() => {
                setTime()
            },1000)
        })
        return{themeToggle, month, date, day, hours, minutes, seconds, calcHours, calcMinutes, setTime, scale}
    }
}).mount('#app')

Внимание! Представленный код — это готовый компонент, но для его работы на странице должен быть установлен и подключен фреймворк Vue. Если вы начинающий разработчик, просто добавьте строку
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
в раздел <head> вашего HTML, и всё заработает.

Разбор кода компонента «Vue Часы-переключатель»

Давайте детально рассмотрим, как устроен этот компонент. Весь код можно условно разделить на три части: шаблон (HTML), стили (CSS) и логика (JavaScript на Vue 3 Composition API).

Шаблон (Template)

Шаблон построен на реактивной привязке данных Vue :class, :style, {{ }}.

Переключение темы: Класс dark динамически добавляется к корневому блоку часов .app__clock и другим элементам в зависимости от значения themeToggle. Сама кнопка-переключатель .app__clock-btn меняет SVG-иконку (солнце/луна) на лету.
Циферблат: 12 делений .line генерируются через v-for и поворачиваются на нужный угол с помощью :style.
Стрелки: Часовой, минутной и секундной стрелкам .hour-hand, .minute-hand, .second-hand вычисляется угол поворота rotateZ на основе текущего времени. Функция scale преобразует единицы времени (часы, минуты, секунды) в градусы.
Время и дата: Цифровое время calcHours:calcMinutes, дата и день недели отображаются через вычисляемые свойства и реактивные переменные.

Стили (CSS)

Стили используют современные возможности CSS:

CSS-переменные (--tr): Задают единое время анимации для всех переходов.
Класс .dark: Инвертирует цвета, меняя тему всей композиции.
clamp(): Обеспечивает отзывчивую, плавную типографику, которая масштабируется между заданными пределами.
Инлайн SVG: Иконки для кнопки темы встроены в CSS как фоновые изображения в формате Data URL, что исключает дополнительные HTTP-запросы.
aspect-ratio: Гарантирует идеальную круглую форму центра циферблата.

Логика (Composition API)

Логика компонента использует Vue 3 Composition API (setup()):

Реактивные переменные (ref): themeToggle, hours, minutes, seconds, date, month, day хранят текущее состояние.
Вычисляемые свойства (computed): calcHours и calcMinutes форматируют время, добавляя ведущий ноль.
Функция setTime: Извлекает текущие дату и время из объекта Date и обновляет реактивные переменные.
Функция scale: Утилита для преобразования значения из одного числового диапазона в другой (например, 0-59 секунд в 0-360 градусов).
Хук onMounted: Запускает первоначальную установку времени и задает интервал (setInterval) для его обновления каждую секунду, заставляя часы идти.

Таким образом: Vue.js берет на себя всю работу по синхронизации DOM с данными. При изменении seconds.value Vue автоматически пересчитывает стиль секундной стрелки и перерисовывает её в браузере. А изменение themeToggle.value мгновенно приводит к перерасчету всех привязанных классов и обновлению интерфейса.

От идеи до реализации: разрабатываем креативные и функциональные UI-компоненты

Наша веб-студия специализируется на создании современных, производительных и пользовательских интерфейсов. Мы можем разработать для вашего проекта аналогичный интерактивный элемент, сложную анимацию или целый фронтенд на Vue.js — от концепции до внедрения.

Свяжитесь с нами, чтобы обсудить ваш проект!

Предыдущий Следующий