- Katılım
- 7 May 2010
- Konular
- 10,579
- Mesajlar
- 58,614
- Çözüm
- 219
- Online süresi
- 10mo 29d
- Reaksiyon Skoru
- 16,721
- Altın Konu
- 444
- TM Yaşı
- 16 Yıl 1 Ay 2 Gün
- Başarım Puanı
- 691
- MmoLira
- 19,925
- DevLira
- 601
ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!
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 Digital-Clock olarak adlandırılır . Standart adlandırma kuralına göre, HTML, CSS ve JavaScript dosyaları sırasıyla index.html , style.css ve script.js olarak adlandırılır.
HTML Kullanarak Dijital Saate Yapı Ekleme
index.html dosyasını açın ve aşağıdaki kodu yapıştırın:
Kod:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> Digital Clock Using JavaScript </title>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div id = "digital-clock"> </div>
<script src = "script.js"> </script>
</body>
</html>Burada, bir div bir oluşturulur id ait dijital saat . Bu div, JavaScript kullanarak dijital saati görüntülemek için kullanılır. style.css harici bir CSS sayfasıdır ve bir <link> etiketi kullanılarak HTML sayfasına bağlanır . Benzer şekilde, script.js harici bir JS sayfasıdır ve < script> etiketi kullanılarak HTML sayfasına bağlanır .
JavaScript Kullanarak Dijital Saate İşlevsellik Ekleme
script.js dosyasını açın ve aşağıdaki kodu yapıştırın:
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();JavaScript Kodunu Anlamak
Zaman () ve güncelleme () işlevleri Dijital Saat 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:
Kod:
var date = new Date();Geçerli tarih ve saat, tarih değişkeninde saklanacaktır . Şimdi tarih nesnesinden geçerli saati, dakikayı ve saniyeyi çıkarmanız gerekiyor.
date.getHours() , date.getMinutes() ve date.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.
Kod:
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.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 eşitse, o zaman meridyen PM'dir (Post Meridiem), aksi halde AM'dir (Ante Meridiem).
Kod:
var period = "";
if (hour >= 12) {
period = "PM";
} else {
period = "AM";
}Mevcut Saati 12 Saat Formatına 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.
Kod:
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.
Kod:
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, DOM'a hedef div'in kimliği ( dijital saat ) kullanılarak erişilir . Daha sonra zaman öğeleri innerText ayarlayıcı kullanılarak div'e atanır.
Kod:
document.getElementById("digital-clock").innerText = hour + " : " + minute + " : " + second + " " + period;Saati Her Saniye Güncellemek
Saat, JavaScript'teki setTimeout() yöntemi kullanılarak her saniye güncellenir.
Kod:
setTimeout(Time, 1000);Dijital Saati CSS Kullanarak Şekillendirme
Styles.css dosyasını açın ve aşağıdaki kodu yapıştırın:
Kod:
/* 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. @import kullanılarak Google yazı tiplerinden içe aktarılır . # Dijital saat id seçici hedef div seçmek için kullanılır. Kimlik seçici, belirli bir öğeyi seçmek için bir HTML öğesinin id niteliğini kullanır .
Bu makalede kullanılan kaynak kodun tamamına bir göz atmak isterseniz,
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
.Ayrıca bu projenin canlı versiyonuna göz atmak isterseniz
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
üzerinden inceleyebilirsiniz.Diğer JavaScript Projelerini Geliştirin
JavaScript'te 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.
Bir sonraki JavaScript tabanlı projenizi arıyorsanız, basit bir hesap makinesi mükemmel bir seçimdir.
Son düzenleme:
