Цифровые часы с использованием JavaScript

В рамках серии 30days Challenge of JavaScript Project. В первый день мы собираемся построить цифровые часы.

Предпосылки для создания цифровых часов

  • HTML — язык гипертекстовой разметки
  • CSS — каскадная таблица стилей
  • Основы JavaScript
  • Загрузите редактор кода Visual Studio. Примечание. На рынке доступно множество редакторов кода. Таким образом, вы можете использовать любой из редакторов кода для кодирования проекта, таких как Atom, возвышенный и т. д.,

Теперь давайте настроим среду проекта.

Шаг 1. Создайте папку с именем «Цифровые часы» на своем ПК.

Шаг 2. Затем создайте файл index.html в папке «Цифровые часы».

Шаг 3. После файла HTML создайте отдельную папку для хранения файлов CSS и JavaScript с именем папки CSS и js.

Шаг 4. Затем создайте файл style.css в папке CSS и файл script.js в папке js.

Шаг 5. Затем в файле index.html создайте базовую структуру HTML-документа.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital Clock</title>
</head>
<body>
/*Project Code*/
</body>
</html>

Шаг 6. На следующем шаге необходимо связать файлы CSS и JavaScript с HTML-документом.

Чтобы связать файлы CSS с документами HTML, нам нужно использовать тег ‹link› под элементом ‹head› и указать путь к файлу CSS в атрибуте href тега ‹link›.

<link rel="stylesheet" href="./css/style.css"/>

Чтобы связать файлы JavaScript с документами HTML, нам нужно использовать тег ‹script› внутри элемента ‹body›, и нам нужно указать тег ‹script› в конце тега ‹body›.

 <script src="./js/script.js"></script>

Общая структура HTML-документа

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital Clock</title>
    <link rel="stylesheet" href="./css/style.css"/>
</head>
<body>
    /*Project Code goes here*/
    <script src="./js/script.js"></script>
</body>
</html>

На изображении ниже показан пользовательский интерфейс цифровых часов, и мы собираемся создать его с помощью HTML и CSS.

В качестве первого шага нам нужно поместить содержимое, необходимое для создания цифровых часов с использованием HTML, и мы добавим эти элементы HTML и их содержимое в элемент body для отображения на веб-странице.

Шаг 1. Создайте контейнер с именем класса «контейнер», внутри которого мы собираемся разместить HTML-элементы, необходимые для цифровых часов.

<div class="container"></div>

Шаг 2. Создайте элемент ‹h2› внутри тега ‹div› с именем класса (.container), чтобы задать заголовок для цифровых часов. Мы дадим цифровые часы в качестве заголовка.

<div class="container">
    <h2>Digital Clock</h2>
 </div>

Шаг 3. Затем создайте еще один элемент ‹div› с именем класса «clock_container» после элемента ‹h2›. Внутри этого мы дадим цифровые часы, которые необходимо отобразить. Примечание. На данный момент мы дадим образец синхронизации часов. позже мы сделаем его динамическим с помощью JavaScript.

<div class="container">
    <h2>Digital Clock</h2>
    <div class="clock_container">
        12:45:35 PM
    </div>
 </div>

Общий код HTML-документа

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital Clock</title>
    <link rel="stylesheet" href="./css/style.css"/>
</head>
<body>
<div class="container">
    <h2>Digital Clock</h2>
    <div class="clock_container">
         12:45:35 PM
    </div>
 </div>
    <script src="./js/script.js"></script>
</body>
</html>

Выходной пользовательский интерфейс HTML-кода без CSS

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

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

Шаг 1. Задайте цвет фона для элемента ‹body›.

body{
    background-color: #dfe6e9;
}

Вывод:

Шаг 2. Примените стиль к элементу ‹h2›, задав цвет текста и семейство шрифтов.

h2{
    color:#2d3436;
    font-family: 'Montserrat', sans-serif;
}

Вывод:

Шаг 3. Примените стиль к элементу ‹div› с именем класса «контейнер», указав ширину и высоту.

.container{
    max-width: 100%;
    height:300px;
}

Шаг 4. Далее мы воспользуемся сеткой, чтобы создать правильную структуру макета. выровняйте элемент ‹div› по центру веб-страницы, указав столбцы grid-template-columns как 1fr (т.е. создайте макет сетки с одним столбцом)

.container{
    max-width: 100%;
    height:300px;
    display: grid;
    grid-template-columns: 1fr;
}

Шаг 5: мы зададим для grid-template-rows значение min-max(auto,100px). Потому что, если мы не передали это свойство после применения сетки к контейнеру, он будет поровну делить свои дочерние элементы и между ними будет много места. Итак, чтобы избежать этого, мы дадим размеру строки минимальное значение 100 пикселей, а максимальное значение — автоматическое (т. е. оно занимает место, сколько содержимого элемента занимает или необходимо).

.container{
    max-width: 100%;
    height:300px;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(auto,100px);
}

Шаг 6.Затем выровняйте его по центру как по вертикали, так и по горизонтали. мы используем два свойства в концепции CSS Grid: align-items и justify-content. Дайте им центр как значение.

.container{
    max-width: 100%;
    height:300px;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(auto,100px);
    justify-items: center;
    align-items: center;
}

Шаг 7. Затем мы применим свойства стиля к элементу ‹div› с именем класса «clock_container», такие как ширина, высота, цвет заполнения для текста, семейство шрифтов, толщина шрифта, цвет фона. , box-shadow и выравнивание содержимого внутри элемента ‹div›.

.clock_container{
   max-width: 100%;
   height:100px;
   padding-left: 30px;
   padding-right: 30px;
   color:#2d3436;
   font-family: 'Orbitron', sans-serif; 
   font-weight: 600;
   background-color: #a29bfe;
   box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
   text-align: center;
   line-height:100px;
}

Общий код таблицы стилей CSS

*{
    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{
    background-color: #dfe6e9;
}
h2{
    color:#2d3436;
    font-family: 'Montserrat', sans-serif;
    align-self: end;
}
.container{
    max-width: 100%;
    height:300px;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(auto,100px);
    justify-items: center;
    align-items: center;
}

.clock_container{
   max-width: 100%;
   height:100px;
   padding-left: 30px;
   padding-right: 30px;
   color:#2d3436;
   font-family: 'Orbitron', sans-serif; 
   font-weight: 600;
   background-color: #a29bfe;
   box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
   text-align: center;
   line-height:100px;
}

Вывод после применения стилей CSS

Теперь мы улучшим наш проект, включив JavaScript для создания динамических цифровых часов. Это означает, что мы создадим часы, которые будут постоянно обновляться для отображения текущего времени, включая часы, минуты и секунды, в режиме реального времени.

Шаг 1.В качестве первого шага мы создадим функцию с названием «цифровые часы».

function digitalclock(){
 
}
digitalclock();

Шаг 2.Далее мы будем использовать объект Date, чтобы получить сведения о дате и времени с вашего ПК и сохранить их в переменной с именем «date». Используйте метод console.log(), чтобы просмотреть вывод в консоли браузера, напечатав эту переменную.

function digitalclock(){
    let date=new Date();
    console.log(date);
 }
digitalclock();

Вывод

Шаг 3. На предыдущем шаге мы получили информацию о дате и времени с помощью объекта Date. Но для наших цифровых часов нам нужны только часы, минуты и секунды. В JavaScript есть встроенный метод для получения всех этих элементов. Встроенными методами являются getHours(), getMinutes() и getSeconds(). Примените эти методы к переменной «дата» и снова сохраните каждый из них отдельно в разных переменных и утешьте их и проверьте вывод.

function digitalclock(){
    let date=new Date();
    let hours=date.getHours();
    let minutes=date.getMinutes();
    let seconds=date.getSeconds();
    console.log("hrs:",hours);
    console.log("mins:",minutes);
    console.log("seconds:",seconds);
 }
digitalclock();

Вывод

Шаг 4.После успешного получения часов, минут и секунд. Далее у нас есть еще одна важная вещь, цифровые часы должны показывать, является ли это AM или PM. Итак, мы используем условный оператор if…else if для построения логики. Во-первых, необходимо объявить переменную с именем «txt» со значением AM, чтобы указать систему часов (т. Е. AM или PM).

let txt="AM";

Далее мы дадим приведенные ниже условия и утверждения в операторе if.

if(hours>12){
     hours=hours-12;
     txt="PM";
     console.log("Hours converted in 12 hours cycle:",hours);
  }

Логика приведенного выше кода заключается в том, что обычно наши системные тайминги будут соответствовать железнодорожному времени в 24-часовом цикле. Но нам это нужно в 12-часовом цикле. Итак, если часы больше 12. Часы будут вычтены на 12, а система часов будет изменена на PM. Давайте утешимся и посмотрим на результат Часов.

Вывод

Далее, в операторе else if должно быть задано еще одно условие. Условие состоит в том, что когда 12:00 ночи, обычно это будет 00:00, но нам нужно, чтобы это было 12, и система часов должна быть изменена на AM.

  else if(hours==0){
        hours=12;
        txt="AM";
    }

Шаг 5. До сих пор мы видели все выходные данные в консоли браузера. Затем нам нужно сделать его видимым на веб-странице внутри элемента ‹div› с именем класса «Clock Container». Потому что мы уже жестко запрограммировали синхронизацию часов. Теперь мы собираемся динамически отображать его.

Мы будем использовать свойство innerHTML для изменения содержимого внутри HTML-элемента. Теперь мы собираемся изменить содержимое внутри элемента ‹div› с именем класса «clock_container».

Перед этим нам нужно захватить этот конкретный HTML-элемент с помощью селектора запросов и сохранить его в переменной с именем «clock_container».

let clock_container = document.querySelector(".clock_container");

Затем мы будем использовать строки шаблона, одну из функций ES6 в JavaScript, для отображения вывода в формате строки, который мы задаем внутри обратных кавычек.

    clock_container.innerHTML=`${hours} : ${minutes} : ${seconds} ${txt}`;

Вывод

Шаг 6. На предыдущем шаге вы могли заметить, что отображалось одно значение часа (например, 4, 5, 6 и т. д.). Это выглядит не очень хорошо, поэтому мы попробуем отобразить это как два значения. Логика для этого есть,

hours=hours<10?'0'+hours:hours;
minutes=minutes<10?'0'+minutes:minutes;
seconds=seconds<10?'0'+seconds:seconds;

Логическое объяснение приведенного выше кода заключается в том, что, когда значение часа меньше 10, он должен объединить строку («0») вместе с полученным значением часа. Это похоже на минуты и секунды также.

Вывод

Шаг 7. Вот мы и подошли к последнему этапу нашего проекта. С помощью объекта Date. у нас есть часы, минуты и секунды. Затем мы отобразили его и на веб-странице.

Но вы могли заметить, что синхронизация часов еще не является динамической. Он дает время в тот момент, когда вы выполняете программу, и после этого время не изменяется.

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

Поэтому для решения проблемы мы будем использовать метод setInterval() для непрерывного запуска функции каждую 1 секунду (что равно 1000 миллисекунд).

setInterval(digitalclock,1000);

Общий код JavaScript

let clock_container = document.querySelector(".clock_container");
function digitalclock(){
    let date=new Date();
    let hours=date.getHours();
    let minutes=date.getMinutes();
    let seconds=date.getSeconds();
    let txt="AM";
    if(hours>12){
        hours=hours-12;
        txt="PM";
    }
    else if(hours==0){
        hours=12;
        txt="AM";
    }
 
    hours=hours<10?'0'+hours:hours;
    minutes=minutes<10?'0'+minutes:minutes;
    seconds=seconds<10?'0'+seconds:seconds;

    clock_container.innerHTML=`${hours} : ${minutes} : ${seconds} ${txt}`;
 }
digitalclock();
setInterval(digitalclock,1000);

Финальная демонстрация цифровых часов после развертывания с использованием Netlify

Нажмите на эту ссылку, чтобы просмотреть живую демонстрацию проекта Цифровые часы.

Наконец, мы успешно создали цифровые часы и развернули их в Netlify.