Создание аналоговых часов с использованием HTML, CSS и JavaScript — отличный способ улучшить свои навыки программирования и получить ценный опыт веб-разработки.

Сегодня в этом блоге вы узнаете, как создать аналоговые часы с помощью HTML, CSS и JavaScript. Я также предоставляю исходный код для загрузки внизу поста в блоге.

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

Как создать аналоговые часы в HTML, CSS и JavaScript

В этом уроке я покажу вам, как создать аналоговые часы, используя html css и javascript. это очень простой способ изучить аналоговые часы с помощью JavaScript.

Я настоятельно рекомендую вам изучить это руководство по созданию аналоговых часов с использованием HTML, CSS и JavaScript. Однако, если вы предпочитаете пропустить видеоурок, вы можете продолжить чтение блога.

Шаги по созданию аналоговых часов

Чтобы создать аналоговые часы, выполните следующие шаги построчно:

  1. Создайте папку. Вы можете назвать эту папку как угодно и внутри этой папки создать указанные файлы.
  2. Создайте файл index.html. Имя файла должно быть индексом и расширением .html.
  3. Создайте файл style.css. Имя файла должно быть стилем и расширением .css.
  4. Создайте файл script.js. Имя файла должно быть script и его расширение .js.

Создать HTML-страницу

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>How to Create Analog Clock using html css and javascript</title>
   <link href="style.css" rel="stylesheet">
</head>
<body>

   <div class="container">
      <div class="clock">
         <span style="--i:1;"><b>1</b></span>
         <span style="--i:2;"><b>2</b></span>
         <span style="--i:3;"><b>3</b></span>
         <span style="--i:4;"><b>4</b></span>
         <span style="--i:5;"><b>5</b></span>
         <span style="--i:6;"><b>6</b></span>
         <span style="--i:7;"><b>7</b></span>
         <span style="--i:8;"><b>8</b></span>
         <span style="--i:9;"><b>9</b></span>
         <span style="--i:10;"><b>10</b></span>
         <span style="--i:11;"><b>11</b></span>
         <span style="--i:12;"><b>12</b></span>
      </div>
   </div>
   <div style="--color:#ff3d58; --height:100px; --width:8px" id="hour" class="hand"><i></i></div>
   <div style="--color:#00a6ff; --height:110px; --width:6px" id="minute" class="hand"><i></i></div>
   <div style="--color:#ffffff; --height:120px; --width:4px" id="second" class="hand"><i></i></div>
   
   <script src="javascript.js"></script>
</body>
</html>

Создать страницу CSS

Во-вторых, вставьте следующие коды в файл style.css.

style.css

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: rgb(59, 57, 57);
  color: #ffffff;
}

.container{
  position: relative;
}

.clock{
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: rgb(255, 255, 255, 0.1);
  border:2px solid rgb(255, 255, 255, 0.25);
  box-shadow: rgba(180, 172, 172, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.clock span{
  position: absolute;
  transform: rotate(calc(30deg * var(--i)));
  inset: 12px;
  text-align: center;
}

.clock span b{
  transform: rotate(calc(-30deg * var(--i)));
  display: inline-block;
  font-size: 24px;
  padding: 5px;
}

.clock::before{
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ffffff;
  z-index: 2;
}
.hand{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.hand i{
  position: absolute;
  background-color: var(--color);
  width: var(--width);
  height: var(--height);
  border-radius: 8px;

}

Создать страницу Javascript

В-третьих, вставьте следующие коды в файл script.js.

javascript.js

let hour = document.getElementById('hour');
let minute = document.getElementById('minute');
let second = document.getElementById('second');

function displayClock(){

   // Getting hour, minute and second from date function
   let date = new Date();
   
   let hh = date.getHours();
   let mm = date.getMinutes();
   let ss = date.getSeconds();

   let hRotation = 30*hh + mm/2;
   let mRotation = 6*mm;
   let sRotation = 6*ss;

   hour.style.transform = `rotate(${hRotation}deg)`;
   minute.style.transform = `rotate(${mRotation}deg)`;
   second.style.transform = `rotate(${sRotation}deg)`;
}

setInterval(displayClock, 1000);

Вот и все, теперь вы успешно создали проект на Analog Clock. Если ваш код не работает или у вас возникли какие-либо проблемы, загрузите файлы исходного кода с помощью данной кнопки загрузки. Это бесплатно, и будет загружен zip-файл, содержащий папку проекта с файлами исходного кода.

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

https://webscodex.com/build-analog-clock-using-html-css-and-javascript/