Создание аналоговых часов с использованием HTML, CSS и JavaScript — отличный способ улучшить свои навыки программирования и получить ценный опыт веб-разработки.
Сегодня в этом блоге вы узнаете, как создать аналоговые часы с помощью HTML, CSS и JavaScript. Я также предоставляю исходный код для загрузки внизу поста в блоге.
Аналоговые часы, которые мы создадим, будут иметь пользовательский интерфейс, идентичный представленному на рисунке. Кроме того, я поделюсь с вами всем кодом HTML, CSS и JavaScript, который я использую для создания этих часов.
Как создать аналоговые часы в HTML, CSS и JavaScript
В этом уроке я покажу вам, как создать аналоговые часы, используя html css и javascript. это очень простой способ изучить аналоговые часы с помощью JavaScript.
Я настоятельно рекомендую вам изучить это руководство по созданию аналоговых часов с использованием HTML, CSS и JavaScript. Однако, если вы предпочитаете пропустить видеоурок, вы можете продолжить чтение блога.
Шаги по созданию аналоговых часов
Чтобы создать аналоговые часы, выполните следующие шаги построчно:
- Создайте папку. Вы можете назвать эту папку как угодно и внутри этой папки создать указанные файлы.
- Создайте файл index.html. Имя файла должно быть индексом и расширением .html.
- Создайте файл
style.css
. Имя файла должно быть стилем и расширением .css. - Создайте файл
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/