- 16 Mar 2018
- 182
- 1
Javascript ders 5 - Geri Sayim (countdown) /1974
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.
Kod:
<div class="container">
<p id="timer">
<span id="timer-gunler"></span>
<span id="timer-saatler"></span>
<span id="timer-dakikalar"></span>
<span id="timer-saniyeler"></span>
</p>
</div>
<script src="uygulama.js"></script>
<div class="container">
<p id="timer">
<span id="timer-gunler"></span>
<span id="timer-saatler"></span>
<span id="timer-dakikalar"></span>
<span id="timer-saniyeler"></span>
</p>
</div>
<script src="uygulama.js"></script>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 GMTden bu yana geçen milisaniyeyi gösteren UTC biçiminde tutar. Örneğin, 15 Mart 2020, 12:00:00 UTC değeri, 1584262800000dir.
Kod:
var endDate = new Date("Mar 15, 2020 12:00:00").getTime();
var endDate = new Date("Mar 15, 2020 12:00:00").getTime();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).
Kod:
var timer = setInterval(function() {
/* geri kalan js kodları buraya gelecek. */
}, 1000);
var timer = setInterval(function() {
/* geri kalan js kodları buraya gelecek. */
}, 1000);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.
JavaScriptte, 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.
Kod:
let now = new Date().getTime();
let t = endDate - now;
let now = new Date().getTime();
let t = endDate - now;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.
Kod:
if (t >= 0) {
let gunler = Math.floor(t / (1000 * 60 * 60 * 24));
let saatler = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let dakikalar = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
let saniyeler = Math.floor((t % (1000 * 60)) / 1000);
}
if (t >= 0) {
let gunler = Math.floor(t / (1000 * 60 * 60 * 24));
let saatler = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let dakikalar = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
let saniyeler = Math.floor((t % (1000 * 60)) / 1000);
}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.
Kod:
********.getElementById("timer-gunler").innerHTML = gunler +
"<span class='label'> gün</span>";
********.getElementById("timer-saatler").innerHTML= ("0" + saatler).slice(-2) +
"<span class='label'> sa</span>";
********.getElementById("timer-dakikalar").innerHTML= ("0" + dakikalar).slice(-2) +
"<span class='label'> dk</span>";
********.getElementById("timer-saniyeler").innerHTML= ("0" + saniyeler).slice(-2) +
"<span class='label'> sn</span>";
********.getElementById("timer-gunler").innerHTML = gunler +
"<span class='label'> gün</span>";
********.getElementById("timer-saatler").innerHTML= ("0" + saatler).slice(-2) +
"<span class='label'> sa</span>";
********.getElementById("timer-dakikalar").innerHTML= ("0" + dakikalar).slice(-2) +
"<span class='label'> dk</span>";
********.getElementById("timer-saniyeler").innerHTML= ("0" + saniyeler).slice(-2) +
"<span class='label'> sn</span>";Zaman dönüşüm hesaplamalarının altındaki if (t> = 0) bloğuna aşağıdaki kodu ekleyin:
Yukarıdaki kod, değerleri 10dan 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.
Kod:
else {
********.getElementById("timer").innerHTML = "Zaman bitti!";
}
else {
********.getElementById("timer").innerHTML = "Zaman bitti!";
}8. HEPSİNİ BİR ARAYA GETİRMEK
Geri sayım sayacını oluşturmak için kullanmanız gereken tam JavaScript kodu:
Kod:
var endDate = new Date("Mar 15, 2020 12:00:00").getTime();
var timer = setInterval(function() {
let now = new Date().getTime();
let t = endDate - now;
if (t >= 0) {
let gunler = Math.floor(t / (1000 * 60 * 60 * 24));
let saatler = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let dakikalar = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
let saniyeler = Math.floor((t % (1000 * 60)) / 1000);
********.getElementById("timer-gunler").innerHTML = gunler +
"<span class='label'> gün</span>";
********.getElementById("timer-saatler").innerHTML= ("0" + saatler).slice(-2) +
"<span class='label'> sa</span>";
********.getElementById("timer-dakikalar").innerHTML= ("0" + dakikalar).slice(-2) +
"<span class='label'> dk</span>";
********.getElementById("timer-saniyeler").innerHTML= ("0" + saniyeler).slice(-2) +
"<span class='label'> sn</span>";
}
else {
********.getElementById("timer").innerHTML = "Zaman bitti!";
}
}, 1000);
var endDate = new Date("Mar 15, 2020 12:00:00").getTime();
var timer = setInterval(function() {
let now = new Date().getTime();
let t = endDate - now;
if (t >= 0) {
let gunler = Math.floor(t / (1000 * 60 * 60 * 24));
let saatler = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let dakikalar = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
let saniyeler = Math.floor((t % (1000 * 60)) / 1000);
********.getElementById("timer-gunler").innerHTML = gunler +
"<span class='label'> gün</span>";
********.getElementById("timer-saatler").innerHTML= ("0" + saatler).slice(-2) +
"<span class='label'> sa</span>";
********.getElementById("timer-dakikalar").innerHTML= ("0" + dakikalar).slice(-2) +
"<span class='label'> dk</span>";
********.getElementById("timer-saniyeler").innerHTML= ("0" + saniyeler).slice(-2) +
"<span class='label'> sn</span>";
}
else {
********.getElementById("timer").innerHTML = "Zaman bitti!";
}
}, 1000);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.
Kod:
body {
margin: 0;
padding: 0;
}
.container {
background: #222;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#timer {
color: #fff;
font-size: 4rem;
}
.label {
font-size: 2.5rem;
padding-left: 0.25rem;
}
body {
margin: 0;
padding: 0;
}
.container {
background: #222;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#timer {
color: #fff;
font-size: 4rem;
}
.label {
font-size: 2.5rem;
padding-left: 0.25rem;
}NOT :
******** diye gördüğünüz yerler (********) ile değişmelisiniz.
Son düzenleme:
