JavaScript ile canlı saat uygulamasına geçmeden önce; günümüz web geliştirme dünyasında en popüler programlama dillerinden Javascript’tir. Bu dil sayesinde, web sayfalarınızı interaktif hale getirebilir ve kullanıcılara daha zengin bir deneyim sunabilirsiniz.
Bu yazıda, JavaScript kullanarak dünya genelindeki farklı ülkelerin saatlerini eş zamanlı olarak gösteren bir canlı saat uygulaması yapacağız. Uygulama, JavaScript’in Date nesnesini kullanarak tarih ve saat işlemlerini gerçekleştirecek. Ayrıca, HTML ve CSS kullanarak uygulamanın arayüzünü tasarlayacağız.
Hazırsanız, JavaScript ile dünya saatlerini gösteren bir canlı saat uygulaması yapmaya başlayalım!
Canlı Saat Kodlama Aşaması
Javascript ile dünyadaki tüm saatleri gösteren bir canlı saat uygulaması yapmak oldukça kolaydır. Bu uygulama için ihtiyacımız olan şeylerden bazıları şunlardır:
- Bir HTML sayfası
- Bir JavaScript dosyası
- Zaman dilimleri listesi
Aşağıdaki adımları izleyerek uygulamanızı oluşturabilirsiniz:
- HTML sayfasını oluşturun
<!DOCTYPE html>
<html>
<head>
<title>Dünya Saatleri</title>
</head>
<body>
<div class="content">
<div class="d-flex justify-content-center">
<div id="saatler" class"row"></div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>HTML sayfamızı yukarıdaki kod bloğumuz ile oluşturduk
- JavaScript dosyasını oluşturun
JavaScript dosyamızı oluşturmanız gerekiyor. Javascript dosyamız, saatleri göstermek için kullanılacak olan kodu içeriyor. Aşağıdaki gibi bir JavaScript kodu kullanarak bir app.js isminde dosya oluşturabilirsiniz:
const saatler = [
["Türkiye", 0],
["New York", -5],
["Los Angeles", -8],
["Londra", 0],
["Paris", 1],
["İstanbul", 3],
["Dubai", 4],
["Tokyo", 9],
["Sidney", 11],
];
function saatleriGoster() {
const tarih = new Date();
let html = "";
saatler.forEach(saat => {
const saatFarki = saat[1];
const saatDilimi = new Date(tarih.getTime() + saatFarki * 60 * 60 * 1000);
const saatStr = saatDilimi.toLocaleTimeString("en-US", {timeZoneName: "short"});
html += `<div class="card mt-1"><div class="card-body">${saat[0]}: ${saatStr}</div></div>`;
});
document.getElementById("saatler").innerHTML = html;
}
setInterval(saatleriGoster, 1000);Şimdi, JavaScript’te bir dizi oluşturuldu ve bu dizi, gösterilecek olan ülkelerin isimleri ve zaman dilimleri içermektedir. Ayrıcan bu dizi, saatleriGoster() isimli bir fonksiyon ile kullanılarak, tarih ve saat bilgileri alınarak her ülkenin saati hesaplamaktadır. Ardından, HTML kodu kullanarak bu saatler ekrana yazdırılmaktadır.
Son olarak, setInterval() fonksiyonu kullanılarak, bu fonksiyon her 1 saniyede bir çalıştırılır ve her saniye güncellenir. Böylece, kullanıcılar sürekli olarak güncel saat bilgilerini görüntüleyebilirler.
- Uygulamayı çalıştırın
HTML ve JavaScript dosyalarınızı oluşturduktan sonra, uygulamayı çalıştırmak için tarayıcınızda HTML dosyasını açmanız yeterlidir.
Tarayıcınızda HTML dosyasını açtığınızda, uygulama çalışacak ve belirtilen şehirlerin saatleri ekranda görünecektir.
Uygulamamızın son hali şu şekildedir:
<!DOCTYPE html>
<html>
<head>
<title>Dünya Saatleri</title>
</head>
<body>
<div class="content">
<div class="d-flex justify-content-center">
<div id="saatler" class"row"></div>
</div>
</div>
<script>
const saatler = [
["Türkiye", 0],
["New York", -5],
["Los Angeles", -8],
["Londra", 0],
["Paris", 1],
["İstanbul", 3],
["Dubai", 4],
["Tokyo", 9],
["Sidney", 11],
];
function saatleriGoster() {
const tarih = new Date();
let html = "";
saatler.forEach(saat => {
const saatFarki = saat[1];
const saatDilimi = new Date(tarih.getTime() + saatFarki * 60 * 60 * 1000);
const saatStr = saatDilimi.toLocaleTimeString("en-US", {timeZoneName: "short"});
html += `<div class="card mt-1"><div class="card-body">${saat[0]}: ${saatStr}</div></div>`;
});
document.getElementById("saatler").innerHTML = html;
}
setInterval(saatleriGoster, 1000);
</script>
</body>
</html>
Yukarıda hazırladığımız kodun dilerseniz çalışır halini codepen üzerinde paylaştım, bu adresten inceleyebilirsiniz.
