JavaScript ile Tarih ve Saat Geri Sayımı Yapma – Tasarım Kodlama
JavaScript

JavaScript ile Tarih ve Saat Geri Sayımı Yapma

Sitenize bir geri sayım sayacı eklemek için jQuery’e ihtiyacınız yoktur. Önceden tanımlanmış bir tarih ve saate kadar geri sayılabilir özelleştirilebilir bir zamanlayıcı oluşturmak için sadece birkaç satır JavaScript yeterlidir. Zamanlayıcıyı Yakında ve Bakım sayfaları, e-Ticaret mağazaları, günlük fırsatlar web siteleri ve etkinlik kaydı sayfaları gibi çeşitli sayfalara gömebilirsiniz.

Bu derste, her şeyi anlayabilmeniz için adım adım geri sayım sayacı oluşturacağız. JavaScript kodunun tamamını makalenin sonunda bulabilirsiniz.

Örnek uygulama için tıklayın

1. HTML OLUŞTURMA

HTML ile başlayalım. Geri sayım sayacı dört rakam gösterecektir: gün, saat, dakika ve saniye. Her biri için bir <span> öğesi oluşturun, böylece daha sonra bunları JavaScript ile hedefleyebilirsiniz.

Ayrıca, kapanış <body> etiketinden hemen önce JavaScript dosyasına giden bir <script> etiketi ekleyin.

2. SON TARİHİ AYARLAYIN

Geri sayımın sona ereceği tarih ve saat için yeni bir global değişken oluşturun (örnekte endDate). değerini, yeni bir Date nesnesi oluşturarak ve getTime() yöntemini çağırarak tanımlayabilirsiniz.

EndDate değişkeni, son kullanma tarihini 1 Ocak 1970, 00: 00: 00.000 GMT’den bu yana geçen milisaniyeyi gösteren UTC biçiminde tutar. Örneğin, 15 Mart 2020, 12:00:00 UTC değeri, 1584262800000’dir.

3.ZAMANLAYICIYI TANIM

Zamanlayıcı için başka bir global değişken oluşturun. Aşağıdaki örnekte bir işlev ifadesi kullanılmıştır, bu nedenle işlevi ayrı ayrı çağırmanız gerekmez. Ancak, isterseniz bunu bir işlev ifadesi olarak da ilan edebilirsiniz.

SetInterval() global JavaScript yöntemi arka arkaya bir işlevi yürütür. İlk argüman çalıştırılacak işlev ve ikinci argüman yürütmeler arasındaki gecikmedir. Gecikmeyi milisaniye cinsinden bildirmeniz gerekir. Zamanlayıcıyı her saniye güncellemek istediğinizde, burada 1000 olacaktır (1 saniye = 1000 milisaniye).

4. HATIRLAMA SÜRESİNİ HESAPLAYIN

Timer() işlevinin içinde iki yeni yerel değişken tanımlayın. Birincisi (şimdi) şimdiki zamanı döndürür, diğeri (t) kalan zamanı hesaplar.

JavaScript’te, boş bir Date() nesnesi geçerli tarih ve saati döndürür. Şimdi değişken, getTime() yöntemini çağırır ve geçerli saati UTC biçiminde saklar. t değişkeni, kalan zamanı bitiş tarihinden itibaren indirerek kalan zamanı hesaplar.

5. GÜN, SAAT, DAKİKA VE SANİYELER İÇİN UTC ZAMANINI DÖNÜŞTÜR

Zamanlayıcıya ait talimatları tutacak bir if bloğu oluşturun. Bu kod kalan süre sıfırdan büyük olana kadar her saniye çalıştırılır. Bir if bloğu kullanarak, geri sayım sona erdiğinde zamanlayıcıyı durdurmanız gerekmez.

İlk önce, kalan zamanı kullanılabilir bir formata dönüştürmeniz gerekir. Şu anda UTC biçiminde, gün, saat, dakika ve saniye olarak görüntülemeniz gerekiyor. Bu nedenle, kalan günler, saatler, dakikalar ve saniyeler için dört yeni yerel değişken bildirin.

6. ZAMANLAYICI ÇIKIŞI

Artık tüm verileriniz doğru biçimde olduğunda, zamanlayıcıyı ekrana aktarabilirsiniz. Belge nesnesinin getElementById () yöntemi, 1. adımda oluşturduğunuz HTML öğelerini sırasıyla
#timer-gunler,
#timer-saatler,
#timer-dakikalar,
#timer-saniyeler.
innerHTML özelliği ile hedeflenen HTML öğelerine içerik yerleştirebilirsiniz.

 

Zaman dönüşüm hesaplamalarının altındaki if (t> = 0) bloğuna aşağıdaki kodu ekleyin:

Yukarıdaki kod, değerleri 10’dan küçük olduğunda saat, dakika ve saniyeye “0” karakterini ekler. Bu gerekli olmamakla birlikte, basamak sayısı ekranda her zaman değişmediğinde zamanlayıcı daha iyi görünür.

Bu, bir veri kümesinin bir kısmını döndürmek için kullanılabilen dilim () yöntemini kullanan bir biçimlendirme hilesiyle başarılabilir. Örneğin, dilim (1) bir dizenin ilk karakterini keser ve dizenin geri kalanını döndürür. Benzer şekilde, dilim (2) ilk iki karakteri siler ve gerisini döndürür. Negatif bir değer, dilimleme yerine hedeflenen karakterleri döndürür. Bu nedenle, dilim (-2) bir dizenin son iki karakterini döndürür.

Kodda her basamağı “0” ile hazırlamanız ve son iki karakteri dilim (-2) ile döndürmeniz gerekir. Bu şekilde JavaScript, her bir basamak numarasına baştaki bir sıfır ekler ancak iki basamaklı sayıları değişmeden bırakır.

7. FAZLA AŞAĞIDAKİ OLDUĞUNDA KULLANICILARI BİLDİRMEK

İsterseniz geri sayım bittiğinde kullanıcıları haberdar edebilirsiniz. Başka bir blok oluşturun ve #timer öğesini getElementById () yöntemiyle hedefleyin. Geri sayım süresi dolduğunda kullanıcılara görüntülemek istediğiniz herhangi bir metni innerHTML olarak ekleyebilirsiniz.

Alternatif olarak, diğer tüm bloğu atlayabilirsiniz, bu durumda geri sayım sona erdiğinde zamanlayıcı ekrandan kaybolur.

8. HEPSİNİ BİR ARAYA GETİRMEK

Geri sayım sayacını oluşturmak için kullanmanız gereken tam JavaScript kodu:

9. BAZI CSS EKLEMEK

Geri sayım sayacını istediğiniz şekilde biçimlendirebilirsiniz. Aşağıdaki CSS, ekranın ortasına hem yatay olarak hem de dikey olarak konumlandırmak için flexbox kullanır.

SONUÇ

Yukarıdaki CSS’yi kullanarak geri sayım sayacı nasıl görünüyor. Zamanlayıcı çalışırken, günleri, saatleri, dakikaları ve saniyeleri gösterir:

 

 

1 Yorum

Yorum bırak