HTML, CSS ve JavaScript Kullanarak Dijital Saat Nasıl Oluşturulur

Dijital Saat, JavaScript'teki en iyi başlangıç ​​projeleri arasındadır. Herhangi bir beceri seviyesindeki insanlar için öğrenmesi oldukça kolaydır.

Bu makalede HTML, CSS ve JavaScript kullanarak kendi dijital saatinizi nasıl oluşturacağınızı öğreneceksiniz. Değişkenler oluşturma, işlevleri kullanma, tarihlerle çalışma, DOM'a erişme ve özelliklere ekleme ve daha fazlası gibi çeşitli JavaScript kavramlarıyla uygulamalı deneyim kazanacaksınız.

Başlayalım.

Dijital Saatin Bileşenleri

Dijital saatin dört bölümü vardır: saat, dakika, saniye ve meridyen.

Dijital Saat Projesi Klasör Yapısı

HTML, CSS ve JavaScript dosyalarını içeren bir kök klasör oluşturun. Dosyaları istediğiniz gibi adlandırabilirsiniz. Burada kök klasör adlandırılmıştır Dijital saat. Standart adlandırma kuralına göre HTML, CSS ve JavaScript dosyaları index.html, stiller.css, ve script.js sırasıyla.

HTML Kullanarak Dijital Saate Yapı Ekleme

Aç index.html dosya ve aşağıdaki kodu yapıştırın:

Burada, bir div ile oluşturulur İD nın-nin dijital saat. Bu div, JavaScript kullanarak dijital saati görüntülemek için kullanılır. stiller.css harici bir CSS sayfasıdır ve HTML sayfasına bir etiket. Benzer şekilde, script.js harici bir JS sayfasıdır ve HTML sayfasına şu şekilde bağlanır: <komut dosyası> etiket.

JavaScript Kullanarak Dijital Saate İşlevsellik Ekleme

Aç script.js dosya ve aşağıdaki kodu yapıştırın:

işlev Zaman() {
// Date sınıfının nesnesi oluşturuluyor
var tarih = yeni Tarih();
// Geçerli saati al
var saat = tarih.getHours();
// Mevcut dakikayı al
var dakika = tarih.getMinutes();
// Geçerli saniyeyi al
var saniye = tarih.getSeconds();
// AM / PM depolamak için değişken
var nokta = "";
// Geçerli saate göre AM / PM atama
if (saat >= 12) {
dönem = "PM";
} Başka {
dönem = "AM";
}
// Saati 12 saatlik formatta dönüştürme
if (saat == 0) {
saat = 12;
} Başka {
if (saat > 12) {
saat = saat - 12;
}
}
// Saat, dakika ve saniyenin güncellenmesi
// 10'dan küçüklerse
saat = güncelleme (saat);
dakika = güncelleme (dakika);
saniye = güncelleme (saniye);
// Div'e zaman elemanları ekleme
document.getElementById("dijital saat").innerText = saat + ": " + dakika + ": " + saniye + " " + nokta;
// Zamanlayıcıyı 1 saniyeye ayarla (1000 ms)
setTimeout (Zaman, 1000);
}
// 10'dan küçükse zaman öğelerini güncelleme işlevi
// 10'dan küçükse zaman öğelerinin başına 0 ekleyin
fonksiyon güncellemesi (t) {
eğer (t < 10) {
"0" + t döndür;
}
Başka {
dönüş t;
}
}
Zaman();

JavaScript Kodunu Anlamak

Zaman() ve Güncelleme() işlevler, Dijital Saate işlevsellik eklemek için kullanılır.

Geçerli Zaman Öğelerini Alma

Geçerli tarih ve saati almak için bir Date nesnesi oluşturmanız gerekir. Bu, JavaScript'te bir Date nesnesi oluşturmak için kullanılan sözdizimidir:

var tarih = yeni Tarih();

Geçerli tarih ve saat, tarih değişken. Şimdi tarih nesnesinden geçerli saati, dakikayı ve saniyeyi çıkarmanız gerekiyor.

tarih.getSaatler(), tarih.getMinutes(), ve tarih.getSeconds() tarih nesnesinden sırasıyla geçerli saati, dakikayı ve saniyeyi almak için kullanılır. Tüm zaman öğeleri, daha sonraki işlemler için ayrı değişkenlerde saklanır.

var saat = tarih.getHours();
var dakika = tarih.getMinutes();
var saniye = tarih.getSeconds();

Mevcut Meridemi Atama (AM/PM)

Dijital Saat 12 saat formatında olduğu için mevcut saate göre uygun meridyeni atamanız gerekmektedir. Geçerli saat 12'den büyük veya 12'ye eşitse, o zaman meridyen PM'dir (Post Meridiem), aksi takdirde AM'dir (Ante Meridiem).

var nokta = "";
if (saat >= 12) {
dönem = "PM";
} Başka {
dönem = "AM";
}

Mevcut Saati 12 Saat Formatında Dönüştürme

Şimdi mevcut saati 12 saatlik bir formata dönüştürmeniz gerekiyor. Geçerli saat 0 ise, geçerli saat 12'ye güncellenir (12 saat biçimine göre). Ayrıca, geçerli saat 12'den büyükse, 12 saatlik zaman biçimiyle uyumlu olması için 12'ye düşürülür.

İlişkili: Bir Web Sayfasında Metin Seçimi, Kes, Kopyala, Yapıştır ve Sağ Tıklama Nasıl Devre Dışı Bırakılır

if (saat == 0) {
saat = 12;
} Başka {
if (saat > 12) {
saat = saat - 12;
}
}

Zaman Öğelerini Güncelleme

10'dan küçükse (Tek Haneli) zaman öğelerini güncellemeniz gerekir. 0, tüm tek basamaklı zaman öğelerine (saat, dakika, saniye) eklenir.

saat = güncelleme (saat);
dakika = güncelleme (dakika);
saniye = güncelleme (saniye);
fonksiyon güncellemesi (t) {
eğer (t < 10) {
"0" + t döndür;
}
Başka {
dönüş t;
}
}

DOM'a Zaman Öğelerini Ekleme

İlk olarak, hedef div'in kimliği kullanılarak DOM'a erişilir (dijital saat). Daha sonra zaman öğeleri, div'e şu şekilde atanır: iç metin pasör.

document.getElementById("dijital saat").innerText = saat + ": " + dakika + ": " + saniye + " " + nokta;

Saati Her Saniye Güncellemek

Saat, kullanılarak her saniye güncellenir. setZaman aşımı() JavaScript'te yöntem.

setTimeout (Zaman, 1000);

Dijital Saati CSS Kullanarak Şekillendirme

Aç stiller.css dosya ve aşağıdaki kodu yapıştırın:

İlişkili: CSS kutu gölgesi Nasıl Kullanılır: Püf Noktaları ve Örnekler

/* Open Sans Condensed Google yazı tipini içe aktarıyoruz */
@import url(' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght@300&display=swap');
#dijital saat {
arka plan rengi: #66ffff;
genişlik: %35;
kenar boşluğu: otomatik;
üst dolgu: 50 piksel;
alt dolgu: 50 piksel;
font-family: 'Open Sans Condensed', sans-serif;
yazı tipi boyutu: 64 piksel;
metin hizalama: merkez;
kutu gölgesi: 0 4px 8px 0 rgba (0, 0, 0, 0.2), 0 6px 20px 0 rgba (0, 0, 0, 0.19);
}

Yukarıdaki CSS, Dijital Saati biçimlendirmek için kullanılır. Burada, saatin metnini görüntülemek için Open Sans Condensed yazı tipi kullanılır. Kullanılarak Google yazı tiplerinden içe aktarılır @ithalat. #dijital saat id seçici, hedef div'i seçmek için kullanılır. Kimlik seçici, İD Belirli bir öğeyi seçmek için bir HTML öğesinin özniteliği.

İlişkili: 10 Dakikada Öğrenebileceğiniz Basit CSS Kod Örnekleri

Bu makalede kullanılan kaynak kodun tamamına bir göz atmak isterseniz, işte size GitHub deposu. Ayrıca, bu projenin canlı versiyonuna bir göz atmak isterseniz, buradan kontrol edebilirsiniz. GitHub Sayfaları.

Not: Bu makalede kullanılan kod MIT lisanslı.

Diğer JavaScript Projelerini Geliştirin

JavaScript'e yeni başlıyorsanız ve iyi bir web geliştiricisi olmak istiyorsanız, JavaScript tabanlı iyi projeler oluşturmanız gerekir. Kariyerinize olduğu kadar özgeçmişinize de değer katabilirler.

Hesap Makinesi, Adam Asmaca oyunu, Tic Tac Toe, JavaScript hava durumu uygulaması, etkileşimli açılış sayfası, Ağırlık Dönüştürme Aracı, Taş Kağıt Makas vb. gibi bazı projeleri deneyebilirsiniz.

JavaScript tabanlı bir sonraki projenizi arıyorsanız, basit bir hesap makinesi mükemmel bir seçimdir.

HTML, CSS ve JavaScript Kullanarak Basit Bir Hesap Makinesi Nasıl Oluşturulur

Basit, hesaplanmış kod, programlama yaparken gidilecek yoldur. HTML, CSS ve JS'de kendi hesap makinenizi nasıl oluşturacağınızı öğrenin.

Sonrakini Oku

Yazar hakkında