Jak stworzyć zegar cyfrowy za pomocą HTML, CSS i JavaScript

Jak stworzyć zegar cyfrowy za pomocą HTML, CSS i JavaScript

Zegar cyfrowy jest jednym z najlepszych projektów dla początkujących w JavaScript. Jest to dość łatwe do nauczenia dla osób na każdym poziomie umiejętności.





W tym artykule dowiesz się, jak zbudować własny zegar cyfrowy za pomocą HTML, CSS i JavaScript. Zdobędziesz praktyczne doświadczenie z różnymi koncepcjami JavaScript, takimi jak tworzenie zmiennych, używanie funkcji, praca z datami, uzyskiwanie dostępu i dodawanie właściwości do DOM i nie tylko.



ile pamięci potrzebuję na moim telefonie

Zacznijmy.





Elementy zegara cyfrowego

Zegar cyfrowy składa się z czterech części: godziny, minuty, sekundy i meridiem.

Struktura folderów projektu zegara cyfrowego

Utwórz folder główny zawierający pliki HTML, CSS i JavaScript. Możesz nazwać pliki, co chcesz. Tutaj nazwany jest folder główny Zegar cyfrowy . Zgodnie ze standardową konwencją nazewnictwa pliki HTML, CSS i JavaScript mają nazwy index.html , style.css , oraz skrypt.js odpowiednio.



Dodawanie struktury do zegara cyfrowego za pomocą HTML

Otworzyć index.html plik i wklej następujący kod:





Digital Clock Using JavaScript






Tutaj div jest tworzony za pomocą NS z zegar cyfrowy . Ten div służy do wyświetlania zegara cyfrowego za pomocą JavaScript. style.css jest zewnętrzną stroną CSS i jest połączona ze stroną HTML za pomocą etykietka. Podobnie, skrypt.js jest zewnętrzną stroną JS i jest połączona ze stroną HTML za pomocą < skrypt> etykietka.



Dodawanie funkcji do zegara cyfrowego za pomocą JavaScript

Otworzyć skrypt.js plik i wklej następujący kod:

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();

Zrozumienie kodu JavaScript

ten Czas() oraz aktualizacja() Funkcje służą do dodawania funkcjonalności do Zegara Cyfrowego.



Pobieranie elementów aktualnego czasu

Aby uzyskać aktualną datę i godzinę, musisz utworzyć obiekt Date. Oto składnia tworzenia obiektu Date w JavaScript:

var date = new Date();

Aktualna data i godzina zostaną zapisane w Data zmienny. Teraz musisz wyodrębnić bieżącą godzinę, minutę i sekundę z obiektu daty.

data.getGodziny() , date.getMinutes(), oraz data.getSeconds () służą do pobierania bieżącej godziny, minuty i sekundy odpowiednio z obiektu daty. Wszystkie elementy czasowe są przechowywane w osobnych zmiennych do dalszych operacji.

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

Przypisanie aktualnego południa (AM/PM)

Ponieważ zegar cyfrowy jest w formacie 12-godzinnym, należy przypisać odpowiedni meridiem zgodnie z aktualną godziną. Jeśli bieżąca godzina jest większa lub równa 12, to meridiem to PM (Post Meridiem), w przeciwnym razie jest to AM (Ante Meridiem).

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

Konwersja bieżącej godziny w formacie 12-godzinnym

Teraz musisz przekonwertować bieżącą godzinę na format 12-godzinny. Jeśli aktualna godzina wynosi 0, aktualna godzina jest aktualizowana do 12 (zgodnie z formatem 12-godzinnym). Ponadto, jeśli bieżąca godzina jest większa niż 12, zostanie skrócona o 12, aby dostosować ją do 12-godzinnego formatu czasu.

Związane z: Jak wyłączyć zaznaczanie tekstu, wycinanie, kopiowanie, wklejanie i klikanie prawym przyciskiem myszy na stronie internetowej?

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

Aktualizacja elementów czasu

Musisz zaktualizować elementy czasu, jeśli są one mniejsze niż 10 (jednocyfrowe). 0 jest dołączane do wszystkich jednocyfrowych elementów czasu (godzina, minuta, sekunda).

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

Dodawanie elementów czasu do DOM

Po pierwsze, dostęp do DOM odbywa się za pomocą identyfikatora div docelowego ( zegar cyfrowy ). Następnie elementy czasowe są przypisywane do div za pomocą tekst wewnętrzny seter.

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

Aktualizacja zegara co sekundę

Zegar jest aktualizowany co sekundę za pomocą setTimeout() metoda w JavaScript.

setTimeout(Time, 1000);

Stylizacja zegara cyfrowego za pomocą CSS

Otworzyć style.css plik i wklej następujący kod:

Związane z: Jak korzystać z CSS box-shadow: sztuczki i przykłady

/* 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);
}

Powyższy CSS jest używany do stylizacji Zegara Cyfrowego. Tutaj czcionka Open Sans Condensed służy do wyświetlania tekstu zegara. Jest importowany z czcionek Google przy użyciu @import . ten #zegar cyfrowy Selektor id służy do wyboru docelowego div. Selektor identyfikatora używa NS atrybut elementu HTML, aby wybrać określony element.

Związane z: Proste przykłady kodu CSS, których możesz się nauczyć w 10 minut

Jeśli chcesz zapoznać się z pełnym kodem źródłowym użytym w tym artykule, oto Repozytorium GitHub . Ponadto, jeśli chcesz rzucić okiem na wersję tego projektu na żywo, możesz to sprawdzić przez Strony GitHub .

Notatka : Kod użyty w tym artykule to Licencja MIT .

Opracuj inne projekty JavaScript

Jeśli jesteś początkującym w JavaScript i chcesz być dobrym programistą internetowym, musisz zbudować dobre projekty oparte na JavaScript. Mogą dodać wartość do twojego CV, a także do twojej kariery.

Możesz wypróbować niektóre projekty, takie jak Kalkulator, gra w wisielca, Kółko i krzyżyk, aplikacja pogodowa JavaScript, interaktywna strona docelowa, narzędzie do konwersji wagi, nożyczki do papieru skalnego itp.

jak zlikwidować konto PayPal?

Jeśli szukasz kolejnego projektu opartego na JavaScript, prosty kalkulator to doskonały wybór.

Udział Udział Ćwierkać E-mail Jak zbudować prosty kalkulator za pomocą HTML, CSS i JavaScript

Prosty, wyliczony kod to droga do programowania. Sprawdź, jak zbudować własny kalkulator w HTML, CSS i JS.

Czytaj dalej Powiązane tematy O autorze Yuvraj Chandra(60 opublikowanych artykułów)

Yuvraj jest studentem informatyki na Uniwersytecie w Delhi w Indiach. Jest pasjonatem Full Stack Web Development. Kiedy nie pisze, bada głębię różnych technologii.

Więcej od Yuvraja Chandra

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować