Прекрасные аналоговые часы с использованием HTML, CSS и JavaScript

Добро пожаловать в день 2 javascript 30 Challenge, и сегодня мы собираемся построить замечательные аналоговые часы с помощью HTML, CSS и JavaScript.

Если вы хотите узнать больше о JavaScript 30, посмотрите видео ниже и GO здесь

Те из вас, кто хочет знать, как будет выглядеть наш законченный проект, нажмите здесь

Стартовые файлы

Перед продвижением вперед скопируйте исходные файлы HTML и CSS с фрагментов ниже и настройте локальную среду для начала

html {
    background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
    background-size: cover;
    font-family: 'helvetica neue';
    text-align: center;
    font-size: 10px;
}

body {
  margin: 0;
  font-size: 2rem;
  display: flex;
  flex: 1;
  min-height: 100vh;
  align-items: center;
}

.clock {
  width: 30rem;
  height: 30rem;
  border: 20px solid white;
  border-radius: 50%;
  margin: 50px auto;
  position: relative;
  padding: 2rem;
  box-shadow:
    0 0 0 4px rgba(0,0,0,0.1),
    inset 0 0 0 3px #EFEFEF,
    inset 0 0 10px black,
    0 0 10px rgba(0,0,0,0.2);
}

.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(-3px); /* account for the height of the clock hands */
}

.hand {
  width: 50%;
  height: 6px;
  background: black;
  position: absolute;
  top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition: all 0.05s;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.hour-hand{
  width: 35%;
  top: 49.1%;
  left: 16%;
  height: 10px;
}
.second-hand{
  height: 4px;  
}

После того, как вы загрузите и настройте код локально, ваш HTML-файл будет выглядеть так

HTML-файловая структура

Структура файла HTML в этом проекте очень проста –

• Отдельные часы рук обернуты внутри своих соответствующих девсов
• Эти девсы затем обернуты внутри другого Div с классом CSS «Clock-Face», который затем завернут внутри конечного родителя Div

Логика JavaScript

У меня было трудно понять логику, которую WES сделал в руководстве, поэтому я использовал свой собственный способ сделать функцию часов.

Это потребует некоторой математики для расчета движения рук часов, поэтому уделять пристальное внимание.

Секунды

Цель: Повернуть руку на х градусы каждую секунду, так что он завершает 360 градусов один раз, чем на 60 секунд

Решение: Для расчета идеальной степени вращения мы должны разделить 360/60, что приведет к 6 градусам в секунду. Это означает, что когда рука вращается на 6 градусов каждую секунду, она завершит 360 градусов в минуту

Протокол

Цель: Повернуть руку на х градусы каждую минуту, чтобы он завершил 360 градусов раз в течение 60 минут

Решение: Опять же, мы получим ту же 6 градусов, мы должны повернуть часы на 6 градусов каждую минуту, чтобы завершить 360 градусов через час

Часовая рука

Цель: Повернуть руку на х градусы каждый час, чтобы он завершил 360 градусов через 12 часов + Мы также должны показать вращение в час рукой, которая вызвана движением минуты руки

Решение:

• Часовая рука завершит 360 градусов в 12 часов, что означает, что он завершит 30 градусов каждый час
• В течение часа 60 минут, завершение этих 60 минут приведет к 30 градусам вращения в час рукой, что означает, что в течение каждые 2 минуты в часовой руке
• Это означает, что кроме вращения часовых часов на 30 градусов через 60 минут мы также должны повернуть его для «M/2» минут каждую минуту

Код JavaScript

Нам пора переносить сырые математические данные выше в реальный код JavaScript.

Давайте начнем с хранения уважаемых часов ручных элементов в переменные

const secondHand = document.querySelector('.second-hand')
const minuteHand = document.querySelector('.min-hand')
const hourHand = document.querySelector('.hour-hand')

Наш следующий шаг – создать 3 отдельных функция для установки вращения второго, минуты и часовых рук

function setSeconds() {
    const now = new Date() // Date() is a inbuilt JavaScript object used to work with dates and time
    const seconds = now.getSeconds() //.getSeconds is a Date() method to get seconds
    const secondsDegrees = (6 * seconds)
    secondHand.style.transform = `rotate(${secondsDegrees}deg)`
}

function setMinutes() {
    const now = new Date()
    const minutes = now.getMinutes() //.getMinutes is a Date() method to get minutes
    const minutesDegrees = (6 * minutes)
    minuteHand.style.transform = `rotate(${minutesDegrees}deg)`
}

function setHours() {
    const now = new Date()
    const hours = now.getHours() //.getHours is a Date() method to get hours
    const minutes = now.getMinutes()
    const hoursDegrees = (30 * hours) + (minutes/2)
    hourHand.style.transform = `rotate(${hoursDegrees}deg)`
}

И, наконец, мы напишем 3 SetintInterval () так, чтобы функции выше позвонили себе снова и снова после каждой секунды.

setInterval(setSeconds, 1000)
setInterval(setMinutes, 1000)
setInterval(setHours, 1000)

Теперь, если вы следили за руководством до этого момента, ваш проект должен работать нормально, верно ??

Нет. Потому что мы все еще пропускаем один важный кусок кода.

Если ваши часы в рабочем состоянии, вы заметите, что это руки на 90 градусов за фактическим временем

Почему это происходит? Помните в начале статьи, я показал вам еще изображение часов, где все руки указывали на часы 12’о ??

Хорошо, что произошло, потому что мы явно вставили ниже код в классе CSS «час»

 transform: rotate(90deg);

Этот код повернул наши руки на наши часы до 90 градусов задолго до того, как мы начали работать над нашим JavaScript

До

После

И поскольку мы стерли вращение по умолчанию рук и динамически добавляли новое вращение, это произошло на горизонтальных руках по умолчанию часов, которые указывают на 8,45 утра/вечера, и это вызвало падение 90 градусов.

Чтобы удалить эту ошибку, мы должны добавить 90 ‘на наши переменные вращения, замените старые переменные вращения новыми, приведенными ниже

 const secondsDegrees = (6 * seconds) + 90
 const minutesDegrees = (6 * minutes) + 90
 const hoursDegrees = (30 * hours) + (minutes/2) + 90

Вывод

Поздравляем 🎉, вы сделали это далеко, и ваши часы сейчас должны работать нормально.

Если нет, или у вас есть какие-либо другие вопросы или смущение относительно этого проекта, выберите комментарий ниже.

Я увижу тебя в следующем посте, до этого

Счастливое кодирование 🙂.

Оригинал: “https://dev.to/ashutoshmishra/create-this-wonderful-analog-clock-using-html-css-and-javascript-day-2-of-javascript30-tutorial-39o2”