JavaScript ile İleri Tarih Sayaç Kodu
Bu blog yazısında, JavaScript kullanarak belli bir tarihten itibaren geçen süreyi gösteren bir sayacın nasıl oluşturulacağını anlatacağım. Kodun kullanımı ve işleyişi hakkında detaylı bilgiler aşağıda yer almaktadır. Kodu elapsed time sayacı şeklinde de bulabilirsiniz. Ben ileti tarih sayaç şeklinde adlandırmak istedim. Geçen zaman sayacı şeklinde de aranabilir. Öncelikle index.html sayfasına ekleyeceğimiz koda bakalım.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Geçen Süre Sayaç</title>
</head>
<body>
<!-- Sayacın gösterileceği alanlar -->
<div id="sayac-years"></div>
<div id="sayac-months"></div>
<div id="sayac-weeks"></div>
<div id="sayac-days"></div>
<div id="sayac-hours"></div>
<div id="sayac-minutes"></div>
<div id="sayac-seconds"></div>
<!-- JavaScript kodu -->
<script>
// Kodu buraya ekleyin
</script>
</body>
</html>Daha sonra, sayacı başlatmak ve belli bir tarihten itibaren geçen süreyi belirtmek için aşağıdaki JavaScript kodunu kullanın.
<script>
// Hedef tarih olarak '2023-12-03T07:22:00' belirledim. Bunu değiştirebilirsiniz.
calculateTimeDifference('2023-12-03T07:22:00', 'sayac-years');
calculateTimeDifference('2023-12-03T07:22:00', 'sayac-months');
calculateTimeDifference('2023-12-03T07:22:00', 'sayac-weeks');
calculateTimeDifference('2023-12-03T07:22:00', 'sayac-days');
calculateTimeDifference('2023-12-03T07:22:00', 'sayac-hours');
calculateTimeDifference('2023-12-03T07:22:00', 'sayac-minutes');
calculateTimeDifference('2023-12-03T07:22:00', 'sayac-seconds');
</script>
İleri Tarih Sayaç Kodunun İşleyişi
JavaScript kodu, calculateTimeDifference fonksiyonu ile başlar. Bu fonksiyon, hedef tarihi ve gösterilecek alanın ID’sini alır. Ardından, her saniyede bir çalışan setInterval fonksiyonu ile belirtilen tarihten itibaren geçen zamanı günceller.
Sayacın güncellenmesi için, geçen zamanın milisaniye cinsinden değeri alınır ve bu değer bir dizi birim (yıl, ay, hafta, gün, saat, dakika, saniye) olarak hesaplanır. Her bir birim, ilgili HTML elementinin içine yazılır.
Örneğin, sayac-years ID’sine sahip elemente geçen yıl bilgisi yazdırılır.
Bu sayede, kullanıcılar belirlenen tarihten itibaren geçen zamanı canlı olarak takip edebilirler.
Umarım bu düzeltilmiş ve açıklayıcı yazı, JavaScript ile belli bir tarihten itibaren geçen süreyi gösteren bir sayacı nasıl oluşturacağınız konusunda size yardımcı olur.
