Как да създадете цифров часовник с помощта на HTML, CSS и JavaScript

Как да създадете цифров часовник с помощта на HTML, CSS и JavaScript

Цифровият часовник е сред най -добрите проекти за начинаещи в JavaScript. Лесно е да се научи за хора от всякакво ниво на умения.





В тази статия ще научите как да създадете свой собствен цифров часовник с помощта на HTML, CSS и JavaScript. Ще получите практически опит с различни концепции на JavaScript, като създаване на променливи, използване на функции, работа с дати, достъп и добавяне на свойства към DOM и др.



защо сири не работи

Да започваме.





Компоненти на цифровия часовник

Цифровият часовник има четири части: час, минута, секунда и меридием.

Структура на папката на проекта за цифрови часовници

Създайте основна папка, която съдържа HTML, CSS и JavaScript файлове. Можете да наименувате файловете каквото искате. Тук основната папка е кръстена Дигитален часовник . Съгласно стандартната конвенция за именуване, HTML, CSS и JavaScript файловете се наименуват index.html , styles.css , и script.js съответно.



Добавяне на структура към цифровия часовник с помощта на HTML

Отвори index.html файл и поставете следния код:





Digital Clock Using JavaScript






Тук, а div е създаден с документ за самоличност на дигитален часовник . Този div се използва за показване на цифровия часовник с помощта на JavaScript. styles.css е външна CSS страница и е свързана с HTML страницата с помощта на етикет. По същия начин, script.js е външна JS страница и е свързана с HTML страницата с помощта на < скрипт> етикет.



Добавяне на функционалност към цифровия часовник с помощта на JavaScript

Отвори script.js файл и поставете следния код:

function Time() {
// Creating object of the Date class
var date = new Date();
// Get current hour
var hour = date.getHours();
// Get current minute
var minute = date.getMinutes();
// Get current second
var second = date.getSeconds();
// Variable to store AM / PM
var period = '';
// Assigning AM / PM according to the current hour
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}
// Converting the hour in 12-hour format
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}
// Updating hour, minute, and second
// if they are less than 10
hour = update(hour);
minute = update(minute);
second = update(second);
// Adding time elements to the div
document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;
// Set Timer to 1 sec (1000 ms)
setTimeout(Time, 1000);
}
// Function to update time elements if they are less than 10
// Append 0 before time elements if they are less than 10
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}
Time();

Разбиране на JavaScript кода

The Време () и update () функции се използват за добавяне на функционалност към цифровия часовник.



Получаване на елементи от текущото време

За да получите текущата дата и час, трябва да създадете обект Date. Това е синтаксисът за създаване на обект Date в JavaScript:

var date = new Date();

Текущата дата и час ще се съхраняват в дата променлива. Сега трябва да извлечете текущия час, минута и секунда от обекта за дата.

date.getHours () , date.getMinutes (), и date.getSeconds () се използват за получаване на текущия час, минута и секунда съответно от обекта за дата. Всички времеви елементи се съхраняват в отделни променливи за по -нататъшни операции.

var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();

Присвояване на текущия обед (AM/PM)

Тъй като цифровият часовник е в 12-часов формат, трябва да зададете подходящия меридием според текущия час. Ако текущият час е по -голям или равен на 12, тогава меридиемът е PM (Post Meridiem), в противен случай това е AM (Ante Meridiem).

var period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}

Конвертиране на текущия час в 12-часов формат

Сега трябва да конвертирате текущия час в 12-часов формат. Ако текущият час е 0, тогава текущият час се актуализира на 12 (според 12-часовия формат). Също така, ако текущият час е по-голям от 12, той се намалява с 12, за да се поддържа в съответствие с 12-часовия формат на времето.

Свързани: Как да деактивирате избора на текст, изрязване, копиране, поставяне и щракване с десния бутон върху уеб страница

if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}

Актуализиране на елементите на времето

Трябва да актуализирате елементите на времето, ако са по-малко от 10 (едноцифрени). 0 се добавя към всички едноцифрени елементи от времето (час, минута, секунда).

hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}

Добавяне на времеви елементи към DOM

Първо, достъпът до DOM се осъществява чрез идентификатора на целевия div ( дигитален часовник ). Тогава елементите за време се присвояват на div с помощта на innerText сетер.

document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;

Актуализиране на часовника всяка секунда

Часовникът се актуализира всяка секунда с помощта на setTimeout () метод в JavaScript.

setTimeout(Time, 1000);

Стилизиране на цифровия часовник с помощта на CSS

Отвори styles.css файл и поставете следния код:

Свързани: Как да използвате CSS box-shadow: трикове и примери

/* Importing Open Sans Condensed Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');

#digital-clock {
background-color: #66ffff;
width: 35%;
margin: auto;
padding-top: 50px;
padding-bottom: 50px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 64px;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

Горният CSS се използва за оформяне на цифровия часовник. Тук шрифтът Open Sans Condensed се използва за показване на текста на часовника. Той е импортиран от шрифтове на Google с помощта @import . The #дигитален часовник ID селекторът се използва за избор на целевия div. Селекторът за идентификатор използва документ за самоличност атрибут на HTML елемент за избор на конкретен елемент.

Свързани: Прости примери за CSS код, които можете да научите за 10 минути

Ако искате да разгледате пълния изходен код, използван в тази статия, ето Хранилище на GitHub . Освен това, ако искате да разгледате версията на този проект на живо, можете да го проверите Страници на GitHub .

Забележка : Кодът, използван в тази статия, е MIT лицензиран .

Разработване на други JavaScript проекти

Ако сте начинаещ в JavaScript и искате да бъдете добър уеб разработчик, трябва да изградите някои добри проекти, базирани на JavaScript. Те могат да добавят стойност към автобиографията ви, както и към кариерата ви.

Можете да изпробвате някои проекти като Калкулатор, игра на палач, Tic Tac Toe, приложение за времето JavaScript, интерактивна целева страница, инструмент за преобразуване на теглото, ножици за рок хартия и др.

как да отворите файлове с java

Ако търсите следващия си проект, базиран на JavaScript, обикновен калкулатор е отличен избор.

Дял Дял Туит електронна поща Как да изградим прост калкулатор с помощта на HTML, CSS и JavaScript

Простият, изчислен код е начинът, по който трябва да отидете при програмирането. Вижте как да изградите свой собствен калкулатор в HTML, CSS и JS.

Прочетете Напред Свързани теми За автора Юврадж Чандра(60 статии са публикувани)

Юврадж е студент по компютърни науки в Университета в Делхи, Индия. Той е страстен за Full Stack Web Development. Когато не пише, изследва дълбочината на различните технологии.

Още от Yuvraj Chandra

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате