ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Динамические цифровые часы на JavaScript

Динамические цифровые часы на JavaScript

Вашему вниманию динамические цифровые часы, которые выполнены на HTML, CSS и JavaScript, где есть переключатель 2 оттенка, это светлый и темный. А точнее, вы можете переключать на ту цветовую палитру, что соответствует основному стилю сайта. Для этого на самом табло в самом верхнем углу присутствует кнопка, которое показывает знаки, виде солнца или луны, что при клике меняется оттенок. Под динамическими цифровыми часами нужно понимать, где часы созданы в цифровой форме, как на компьютере, что изменяется линейно.

Как мы знаем, что некоторые цифровые часы показывают время в формате 24 часа в сутки, что иногда для некоторых людей выглядит запутанным, по этой причине здесь цифровые часы по умолчанию показывают время до 12 часов. Вся стилистика дизайна пользовательского интерфейса данных часов выполнен при помощи HTML и CSS, и для динамического изменения времени и для внесения изменений в светлую и темную тему, что было добавлено несколько кодов JavaScript. Теперь можно легко создать данный тип цифровых часов, если вам сложно создать, где просто можете скопировать или загрузить все файлы.

Рассмотрим стиль дизайна в разных оттенках:

1. С открытием страницы;

2. При переключение смены оттенка цвета;

Установка:

Шрифтовые кнопки

Код

HTML

Код

<section>
  <div class="periodukasun">
  <div class="anichen">
  <i class="fas fa-moon"></i>
  <i class="fas fa-sun"></i>
  </div>
  <div class="vemya-period">
  <div class="spacesamig">
  <div class="limitation">
  <span class="num hour_num">08</span>
  <span class="text">Hours</span>
  </div>
  <span class="colon">:</span>
  </div>
  <div class="spacesamig">
  <div class="limitation">
  <span class="num min_num">45</span>
  <span class="text">Minutes</span>
  </div>
  <span class="colon">:</span>
  </div>
  <div class="spacesamig">
  <div class="limitation">
  <span class="num sec_num">06</span>
  <span class="text">Seconds</span>
  </div>
  <span class="am_pm">AM</span>
  </div>
  </div>
  </div>

  </section>

  <script>
  let section = document.querySelector("section"),
  anichen = document.querySelector(".anichen");

  anichen.onclick = ()=>{
  section.classList.toggle("dark");
  }
  setInterval(()=>{
  let date = new Date(),
  hour = date.getHours(),
  min = date.getMinutes(),
  sec = date.getSeconds();

  let d;
  d = hour < 12 ? "AM" : "PM";
  hour = hour > 12 ? hour - 12 : hour;
  hour = hour == 0 ? hour = 12 : hour;
  hour = hour < 10 ? "0" + hour : hour;
  min = min < 10 ? "0" + min : min;
  sec = sec < 10 ? "0" + sec : sec;

  document.querySelector(".hour_num").innerText = hour;
  document.querySelector(".min_num").innerText = min;
  document.querySelector(".sec_num").innerText = sec;
  document.querySelector(".am_pm").innerText = d;

  }, 1000); // 1000 миллисекунд = 1 с

  </script>

CSS

Код

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Orbitron', sans-serif;
  transition: all 0.4s ease;
}
section{
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F0F8FF;
  padding: 0 20px;
}
section.dark{
  background: #24292D;
}
section .periodukasun{
  display: flex;
  align-items center;
  justify-content: center;
  height: 220px;
  max-width: 560px;
  width: 100%;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  position: relative;
}
section.dark .periodukasun{
  background: #323840;
}
section .periodukasun .anichen i{
  position: absolute;
  right: 17px;
  top: 17px;
  height: 30px;
  width: 30px;
  background: #24292D;
  color: #fff;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
}
section.dark .periodukasun .anichen i{
  background: #fff;
  color: #323840;
}
.periodukasun .anichen i.fa-sun{
  opacity: 0;
  pointer-events: none;
}
section.dark .periodukasun .anichen i.fa-sun{
  opacity: 1;
  pointer-events: auto;
  font-size: 16px;
}
section .periodukasun .vemya-period{
  display: flex;
  align-items: center;
}
.periodukasun .vemya-period .spacesamig{
  display: flex;
  align-items: center;
  position: relative;
}
.vemya-period .spacesamig .am_pm{
  position: absolute;
  top: 0;
  right: -50px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}
section.dark .vemya-period .spacesamig .am_pm{
  color: #fff;
}
.vemya-period .spacesamig .limitation{
  height: 100px;
  width: 100px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background: #F0F8FF;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
section.dark .vemya-period .spacesamig .limitation{
  background: #24292D;
}
.vemya-period .spacesamig .limitation,
.vemya-period .spacesamig .colon{
  font-size: 35px;
  font-weight: 600;
}
section.dark .vemya-period .limitation .num,
section.dark .vemya-period .colon{
  color: #fff;
}
.vemya-period .spacesamig .colon{
  font-size: 40px;
  margin: 0 10px;
}
.vemya-period .spacesamig .limitation .text{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
}
section.dark .vemya-period .spacesamig .text{
  color: #fff;
}

В самом начале стиля идет шрифт, что не стал убирать, ведь под данным шрифтом часы смотрятся великолепно, что думаю при установки многим пригодятся.

Как уже было сказано в описание, что данные часы при установочном процессе станут показывать нам время только до 12 часов, что нравится большинству людей.

Демонстрация

22 Сентября 2021 Загрузок: 1 Просмотров: 952 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0