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.

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, i skrypt.js odpowiednio.

Dodawanie struktury do zegara cyfrowego za pomocą HTML

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

Tutaj div jest tworzony za pomocą ID 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:

funkcja Czas() {
// Tworzenie obiektu klasy Date
var data = nowa Data();
// Pobierz aktualną godzinę
var godzina = data.getGodziny();
// Pobierz aktualną minutę
var minuta = data.getMinutes();
// Pobierz bieżącą sekundę
var sekunda = data.getSeconds();
// Zmienna do przechowywania AM / PM
var okres = "";
// Przypisywanie AM / PM według aktualnej godziny
jeśli (godzina >= 12) {
okres = „PM”;
} jeszcze {
okres = „przed południem”;
}
// Konwersja godziny w formacie 12-godzinnym
jeśli (godzina == 0) {
godzina = 12;
} jeszcze {
jeśli (godzina > 12) {
godzina = godzina - 12;
}
}
// Aktualizuję godzinę, minutę i sekundę
// jeśli są mniejsze niż 10
godzina = aktualizacja (godzina);
minuta = aktualizacja (minuta);
drugi = aktualizacja (druga);
// Dodawanie elementów czasu do div
document.getElementById("zegar-cyfrowy").innerText = godzina + ": " + minuta + ": " + sekunda + " " + kropka;
// Ustaw Timer na 1 s (1000 ms)
setTimeout (czas, 1000);
}
// Funkcja aktualizacji elementów czasu, jeśli są one mniejsze niż 10
// Dołącz 0 przed elementami czasu, jeśli są one mniejsze niż 10
aktualizacja funkcji (t) {
jeśli (t < 10) {
zwróć "0" + t;
}
jeszcze {
powrót t;
}
}
Czas();

Zrozumienie kodu JavaScript

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

Pobieranie elementów bieżącego czasu Time

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

var data = nowa Data();

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

data.getGodziny(), date.getMinutes(), i 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 godzina = data.getGodziny();
var minuta = data.getMinutes();
var sekunda = data.getSeconds();

Przypisywanie aktualnego południka (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 AM (Ante Meridiem).

var okres = "";
jeśli (godzina >= 12) {
okres = „PM”;
} jeszcze {
okres = „przed południem”;
}

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?

jeśli (godzina == 0) {
godzina = 12;
} jeszcze {
jeśli (godzina > 12) {
godzina = godzina - 12;
}
}

Aktualizacja elementów czasu

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

godzina = aktualizacja (godzina);
minuta = aktualizacja (minuta);
drugi = aktualizacja (druga);
aktualizacja funkcji (t) {
jeśli (t < 10) {
zwróć "0" + t;
}
jeszcze {
powrót t;
}
}

Dodawanie elementów czasu do DOM

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

document.getElementById("zegar-cyfrowy").innerText = godzina + ": " + minuta + ": " + sekunda + " " + kropka;

Aktualizacja zegara co sekundę

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

setTimeout (czas, 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

/* Importowanie czcionki Open Sans Condensed Google */
@importuj adres URL(' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght@300&display=swap');
#zegar cyfrowy {
kolor tła: #66ffff;
szerokość: 35%;
margines: auto;
padding-top: 50px;
dopełnienie-dolne: 50px;
rodzina czcionek: 'Open Sans Condensed', bezszeryfowa;
rozmiar czcionki: 64px;
wyrównanie tekstu: środek;
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. #zegar cyfrowy Selektor id służy do wyboru docelowego div. Selektor identyfikatora używa ID 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ć Strony GitHub.

Uwaga: 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ć kilka dobrych projektów opartych 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.

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

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

O autorze