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

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.



benim sirim neden çalışmıyor

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:





Digital Clock Using JavaScript






Burada, bir div ile oluşturulur İD ile ilgili 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:

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 Kodunu Anlamak

NS 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 date = new Date();

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 hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();

Geçerli Öğleni (AM/PM) Atama

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 period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = '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.

İlgili: 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 (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 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.

hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return 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('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;

Saati Her Saniye Güncellemek

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

setTimeout(Time, 1000);

Dijital Saati CSS Kullanarak Şekillendirme

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

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

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

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 @içe aktarmak . NS #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.

İlgili: 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 bir açılış sayfası, Ağırlık Dönüştürme Aracı, Taş Kağıt Makas vb. gibi bazı projeleri deneyebilirsiniz.

satın almadan pc'de ram nasıl arttırılır

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

Paylaş Paylaş Cıvıldamak E-posta 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 İlgili konular Yazar hakkında Yuvraj Chandra(60 Makale Yayımlandı)

Yuvraj, Hindistan Delhi Üniversitesi'nde Bilgisayar Bilimleri lisans öğrencisidir. Full Stack Web Geliştirme konusunda tutkulu. Yazmadığı zamanlarda farklı teknolojilerin derinliğini keşfediyor.

Yuvraj Chandra'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın