Geri say\u0131m saya\u00e7lar\u0131, web sitelerinde ve uygulamalarda kullan\u0131c\u0131lar\u0131 belirli bir etkinli\u011fe haz\u0131rlamak, bir teklifin s\u00fcresinin doldu\u011funu belirtmek veya bir lansman tarihini duyurmak i\u00e7in yayg\u0131n olarak kullan\u0131lan dinamik aray\u00fcz \u00f6\u011feleridir. Etkinlik biletlerinin sat\u0131\u015fa \u00e7\u0131k\u0131\u015f\u0131na kalan s\u00fcreden, y\u0131lba\u015f\u0131na kalan g\u00fcn say\u0131s\u0131na kadar bir\u00e7ok farkl\u0131 senaryoda kar\u015f\u0131m\u0131za \u00e7\u0131karlar. Bu makalede, JavaScript kullanarak s\u0131f\u0131rdan kapsaml\u0131 bir geri say\u0131m sayac\u0131 olu\u015fturman\u0131n t\u00fcm ad\u0131mlar\u0131n\u0131, temel mant\u0131ktan geli\u015fmi\u015f \u00f6zelliklere kadar detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n
Geri say\u0131m saya\u00e7lar\u0131, web geli\u015ftirmenin temel ve olduk\u00e7a pratik bir par\u00e7as\u0131d\u0131r. Kullan\u0131c\u0131lar\u0131n dikkatini \u00e7ekme, aciliyet hissi yaratma ve \u00f6nemli tarihleri vurgulama konusunda etkilidirler.<\/p>\n
* E-ticaret Siteleri:<\/strong> Fla\u015f indirimlerin biti\u015f s\u00fcresi, kampanyalar\u0131n son g\u00fcn\u00fc. Bu saya\u00e7lar\u0131 olu\u015fturmak i\u00e7in JavaScript’in Geri say\u0131m sayac\u0131 olu\u015fturman\u0131n ilk ad\u0131m\u0131, JavaScript’in zamanla nas\u0131l ba\u015fa \u00e7\u0131kt\u0131\u011f\u0131n\u0131 anlamakt\u0131r. JavaScript’te zaman\u0131 y\u00f6netmek i\u00e7in ana ara\u00e7 * Geri say\u0131m saya\u00e7lar\u0131 i\u00e7in genellikle hedef tarihi belirli bir dize veya y\u0131l, ay, g\u00fcn format\u0131nda tan\u0131mlayaca\u011f\u0131z.<\/p>\n Zaman dilimleri, \u00f6zellikle global uygulamalar geli\u015ftirirken \u00f6nemli bir fakt\u00f6rd\u00fcr. JavaScript’in * Geri say\u0131m saya\u00e7lar\u0131nda, genellikle hedef tarihi UTC olarak tan\u0131mlamak ve hesaplamalar\u0131 da UTC \u00fczerinden yapmak, farkl\u0131 zaman dilimlerindeki kullan\u0131c\u0131lar i\u00e7in tutarl\u0131l\u0131k sa\u011flaman\u0131n iyi bir yoludur. Ancak, e\u011fer saya\u00e7 belirli bir yerel etkinlik i\u00e7inse, yerel zaman dilimini kullanmak daha uygun olabilir. Bu makalede, basitle\u015ftirmek ad\u0131na genellikle yerel zaman dilimi \u00fczerinden i\u015flem yapaca\u011f\u0131z, ancak zaman dilimi farkl\u0131l\u0131klar\u0131n\u0131n potansiyel bir sorun oldu\u011funu unutmamak \u00f6nemlidir.<\/p>\n JavaScript’te zaman hesaplamalar\u0131n\u0131n \u00e7o\u011fu milisaniyeler \u00fczerinden yap\u0131l\u0131r. Bir saniye 1000 milisaniyedir. Bu, bize zaman\u0131 \u00e7ok hassas bir \u015fekilde \u00f6l\u00e7me ve manip\u00fcle etme imkan\u0131 sunar.<\/p>\n * 1 saniye = 1000 milisaniye<\/strong> Bu d\u00f6n\u00fc\u015f\u00fcm fakt\u00f6rleri, iki tarih aras\u0131ndaki milisaniye fark\u0131n\u0131 g\u00fcn, saat, dakika ve saniyeye \u00e7evirirken kritik \u00f6neme sahip olacakt\u0131r.<\/p>\n Geri say\u0131m sayac\u0131n\u0131n temel mant\u0131\u011f\u0131, bir hedef tarih ile mevcut tarih aras\u0131ndaki fark\u0131 s\u00fcrekli olarak hesaplamakt\u0131r.<\/p>\n \u00d6ncelikle, geri say\u0131m\u0131n bitece\u011fi bir hedef tarih belirlememiz gerekiyor. Bu, gelecekteki herhangi bir tarih ve saat olabilir.<\/p>\n Geri say\u0131m\u0131n her g\u00fcncellemesinde, o anki g\u00fcncel tarihi ve saati almam\u0131z gerekecek.<\/p>\n Hedef tarih ile g\u00fcncel tarih aras\u0131ndaki fark\u0131 milisaniye cinsinden hesaplamak i\u00e7in E\u011fer Milisaniye cinsinden elde etti\u011fimiz fark\u0131, kullan\u0131c\u0131lar\u0131n anlayabilece\u011fi g\u00fcn, saat, dakika ve saniye birimlerine \u00e7evirmemiz gerekiyor. Bu, temel matematiksel b\u00f6lme ve modulo (kalan) operat\u00f6rleri ile yap\u0131l\u0131r.<\/p>\n Yukar\u0131da bahsetti\u011fimiz d\u00f6n\u00fc\u015f\u00fcm fakt\u00f6rlerini kullanarak hesaplamalar\u0131 yapaca\u011f\u0131z:<\/p>\n Bu hesaplamalar, bize her bir zaman birimi i\u00e7in tam say\u0131 de\u011ferlerini verecektir.<\/p>\n Tek haneli say\u0131lar\u0131 (\u00f6rn. 5 saniye) “05” \u015feklinde \u00e7ift haneli g\u00f6stermek, sayac\u0131n daha estetik ve okunabilir olmas\u0131n\u0131 sa\u011flar. Bunu yapmak i\u00e7in basit bir ko\u015fullu ifade veya Geri say\u0131m sayac\u0131n\u0131n de\u011ferlerini web sayfas\u0131nda g\u00f6sterebilmek i\u00e7in uygun bir HTML yap\u0131s\u0131na ihtiyac\u0131m\u0131z var. Genellikle, her zaman birimi i\u00e7in ayr\u0131 bir Bu yap\u0131, her bir zaman birimini ayr\u0131 ayr\u0131 g\u00fcncelleyebilmemizi sa\u011flar. Sayac\u0131n daha iyi g\u00f6r\u00fcnmesi i\u00e7in basit bir CSS ekleyebiliriz. Bu, makalenin ana konusu olmasa da, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan \u00f6nemlidir.<\/p>\n \u015eimdiye kadar \u00f6\u011frendi\u011fimiz t\u00fcm par\u00e7alar\u0131 bir araya getirerek JavaScript kodunu yazmaya ba\u015flayabiliriz.<\/p>\n \u00d6ncelikle, hedef tarihi ve HTML elementlerini referans alacak de\u011fi\u015fkenleri tan\u0131mlayal\u0131m.<\/p>\n Geri say\u0131m mant\u0131\u011f\u0131n\u0131 i\u00e7eren ana fonksiyonu olu\u015ftural\u0131m. Bu fonksiyon, her saniye \u00e7a\u011fr\u0131lacak ve saya\u00e7 de\u011ferlerini g\u00fcncelleyecektir.<\/p>\n Bu, temel bir geri say\u0131m sayac\u0131n\u0131n eksiksiz JavaScript kodudur.<\/p>\n Temel sayac\u0131 olu\u015fturduktan sonra, kullan\u0131c\u0131 deneyimini ve i\u015flevselli\u011fi art\u0131rmak i\u00e7in baz\u0131 geli\u015fmi\u015f \u00f6zellikler ekleyebiliriz.<\/p>\n Hedef tarihi sabit kodlamak yerine, kullan\u0131c\u0131dan girdi alarak, bir API'den \u00e7ekerek veya URL parametrelerinden okuyarak dinamik hale getirebiliriz.<\/p>\n * Kullan\u0131c\u0131 Giri\u015fi:<\/strong> Bir form arac\u0131l\u0131\u011f\u0131yla kullan\u0131c\u0131dan tarih ve saat girmesini isteyebiliriz. Baz\u0131 durumlarda, geri say\u0131m\u0131 duraklatma ve daha sonra devam ettirme i\u015flevselli\u011fi gerekebilir. Bu, Bu, duraklatma ve devam ettirme i\u015flevselli\u011fini eklemek i\u00e7in temel bir yakla\u015f\u0131md\u0131r.<\/p>\n Geri say\u0131m sona erdi\u011finde belirli bir eylemi tetiklemek (\u00f6rn. bir pop-up g\u00f6stermek, bir sayfay\u0131 yeniden y\u00fcklemek) i\u00e7in bir callback fonksiyonu kullanabiliriz.<\/p>\n Geri say\u0131m sayac\u0131n\u0131 daha \u00e7ekici hale getirmek i\u00e7in animasyonlar veya ses efektleri eklenebilir.<\/p>\n * CSS Animasyonlar\u0131:<\/strong> Say\u0131lar de\u011fi\u015fti\u011finde hafif bir ge\u00e7i\u015f veya b\u00fcy\u00fcme\/k\u00fc\u00e7\u00fclme efekti eklenebilir. Baz\u0131 durumlarda sadece saat:dakika:saniye g\u00f6stermek isteyebiliriz, veya g\u00fcnler yerine toplam saatleri g\u00f6stermek isteyebiliriz. Hesaplama mant\u0131\u011f\u0131n\u0131 buna g\u00f6re ayarlamak yeterlidir.<\/p>\n Sayac\u0131n farkl\u0131 ekran boyutlar\u0131nda iyi g\u00f6r\u00fcnmesini sa\u011flamak i\u00e7in duyarl\u0131 CSS kullanmak \u00f6nemlidir. Ayr\u0131ca, JavaScript kodunun performans\u0131, \u00f6zellikle \u00e7ok say\u0131da saya\u00e7 veya karma\u015f\u0131k animasyonlar kullan\u0131l\u0131yorsa, g\u00f6z \u00f6n\u00fcnde bulundurulmal\u0131d\u0131r. Geri say\u0131m saya\u00e7lar\u0131 olu\u015ftururken kar\u015f\u0131la\u015f\u0131labilecek baz\u0131 yayg\u0131n sorunlar ve bunlar\u0131n \u00e7\u00f6z\u00fcmleri \u015funlard\u0131r:<\/p>\n * Sorun:<\/strong> Hedef tarih, geli\u015ftiricinin yerel zaman diliminde ayarlan\u0131r, ancak kullan\u0131c\u0131 farkl\u0131 bir zaman diliminde oldu\u011funda saya\u00e7 yanl\u0131\u015f g\u00f6r\u00fcn\u00fcr. \u00d6rne\u011fin, T\u00fcrkiye'de 1 Ocak 2025 00:00'a ayarlanan bir saya\u00e7, ABD'deki bir kullan\u0131c\u0131 i\u00e7in 31 Aral\u0131k 2024 ak\u015fam\u0131 bitebilir. * Sorun:<\/strong> E\u011fer geri say\u0131m sayac\u0131 bir oturumla ilgiliyse (\u00f6rn. bir quiz i\u00e7in kalan s\u00fcre), sayfa yenilendi\u011finde saya\u00e7 s\u0131f\u0131rlanabilir. * Sorun:<\/strong> \u00c7ok say\u0131da geri say\u0131m sayac\u0131 veya karma\u015f\u0131k animasyonlar, \u00f6zellikle eski cihazlarda performans\u0131 d\u00fc\u015f\u00fcrebilir. * Sorun:<\/strong> Kullan\u0131c\u0131, bilgisayar\u0131n\u0131n saatini manuel olarak de\u011fi\u015ftirirse, geri say\u0131m sayac\u0131 yanl\u0131\u015f \u00e7al\u0131\u015fabilir. \u015eimdiye kadar \u00f6\u011frendiklerimizi birle\u015ftirerek tam, \u00e7al\u0131\u015f\u0131r bir \u00f6rnek olu\u015ftural\u0131m.<\/p>\n
\n* Etkinlik ve Lansman Sayfalar\u0131:<\/strong> Bir \u00fcr\u00fcn lansman\u0131, konser veya konferans ba\u015flang\u0131\u00e7 tarihi.
\n* Webinar ve Canl\u0131 Yay\u0131n Duyurular\u0131:<\/strong> Bir sonraki canl\u0131 yay\u0131n\u0131n ba\u015flang\u0131c\u0131na kalan s\u00fcre.
\n* Oyunlar ve Yar\u0131\u015fmalar:<\/strong> Bir turun bitimine veya bir g\u00f6revin tamamlanmas\u0131na kalan s\u00fcre.
\n* Bak\u0131m Modu Sayfalar\u0131:<\/strong> Bir web sitesinin tekrar aktif olaca\u011f\u0131 zamana kalan s\u00fcre.<\/p>\nDate<\/code> nesnesi, zamanlay\u0131c\u0131 fonksiyonlar\u0131 (setInterval<\/code>) ve temel matematiksel i\u015flemlerden faydalanaca\u011f\u0131z.<\/p>\nTemel Kavramlar: Zaman ve JavaScript<\/h3>\n
Date<\/code> nesnesidir.<\/p>\nDate<\/code> Nesnesi<\/h4>\nDate<\/code> nesnesi, tarih ve saat bilgilerini depolamak ve manip\u00fcle etmek i\u00e7in kullan\u0131l\u0131r. Yeni bir Date<\/code> nesnesi olu\u015fturman\u0131n birka\u00e7 yolu vard\u0131r:<\/p>\nnew Date()<\/code>:<\/strong> Mevcut tarih ve saati i\u00e7eren bir Date<\/code> nesnesi olu\u015fturur.
\n* new Date(year, month, day, hours, minutes, seconds, milliseconds)<\/code>:<\/strong> Belirli bir tarih ve saatle bir Date<\/code> nesnesi olu\u015fturur. Ay (month) 0’dan ba\u015flar (Ocak 0, \u015eubat 1 vb.).
\n* new Date(milliseconds)<\/code>:<\/strong> 1 Ocak 1970 UTC’den (Unix Epoch) itibaren ge\u00e7en milisaniye say\u0131s\u0131n\u0131 kullanarak bir Date<\/code> nesnesi olu\u015fturur.
\n* new Date(dateString)<\/code>:<\/strong> Bir tarih dizesini (\u00f6rn. “2023-12-31T23:59:59”) ayr\u0131\u015ft\u0131rarak bir Date<\/code> nesnesi olu\u015fturur.<\/p>\nZaman Dilimleri ve UTC<\/h4>\n
Date<\/code> nesnesi, genellikle yerel zaman dilimini kullan\u0131r, ancak UTC (Coordinated Universal Time) de\u011ferlerini de alabilir ve ayarlayabiliriz.<\/p>\ngetTime()<\/code>:<\/strong> 1 Ocak 1970 UTC’den bu yana ge\u00e7en milisaniye say\u0131s\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr. Bu, iki tarih aras\u0131ndaki fark\u0131 hesaplamak i\u00e7in en g\u00fcvenilir y\u00f6ntemdir, \u00e7\u00fcnk\u00fc zaman diliminden ba\u011f\u0131ms\u0131zd\u0131r.
\n* getUTCHours()<\/code>, getUTCMinutes()<\/code> vb.:<\/strong> UTC zaman\u0131na g\u00f6re saat, dakika gibi de\u011ferleri d\u00f6nd\u00fcr\u00fcr.<\/p>\nMilisaniye Cinsinden Zaman<\/h4>\n
\n 1 dakika = 60 saniye = 60 <\/em> 1000 milisaniye<\/strong>
\n 1 saat = 60 dakika = 60 <\/em> 60 * 1000 milisaniye<\/strong>
\n 1 g\u00fcn = 24 saat = 24 <\/em> 60 60 <\/em> 1000 milisaniye<\/strong><\/p>\nGeri Say\u0131m Mant\u0131\u011f\u0131: Hedef Tarih ve Fark<\/h3>\n
Hedef Tarih Belirleme<\/h4>\n
\/\/ Y\u0131l, Ay (0-11), G\u00fcn, Saat, Dakika, Saniye format\u0131nda\nconst hedefTarih = new Date(2024, 11, 31, 23, 59, 59); \/\/ 31 Aral\u0131k 2024, 23:59:59\n\n\/\/ Veya bir tarih dizesi olarak (daha esnek)\n\/\/ const hedefTarih = new Date(\"Dec 31, 2024 23:59:59\");\n\n\/\/ Veya ISO format\u0131nda\n\/\/ const hedefTarih = new Date(\"2024-12-31T23:59:59\");<\/code><\/pre>\nDate<\/code> nesnesinin ay parametresinin 0’dan ba\u015flad\u0131\u011f\u0131n\u0131 unutmamak \u00f6nemlidir (Ocak 0, Aral\u0131k 11).<\/p>\nG\u00fcncel Tarih Alma<\/h4>\n
const simdi = new Date(); \/\/ Mevcut tarih ve saat<\/code><\/pre>\n\u0130ki Tarih Aras\u0131ndaki Fark\u0131 Hesaplama<\/h4>\n
getTime()<\/code> metodunu kullan\u0131r\u0131z. Bu metod, 1 Ocak 1970 UTC’den bu yana ge\u00e7en milisaniye say\u0131s\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr.<\/p>\nconst farkMilisaniye = hedefTarih.getTime() - simdi.getTime();<\/code><\/pre>\nfarkMilisaniye<\/code> pozitifse, hedef tarihe daha zaman var demektir. E\u011fer s\u0131f\u0131r veya negatifse, hedef tarih ge\u00e7mi\u015f demektir ve geri say\u0131m bitmi\u015ftir.<\/p>\nFark\u0131 Bile\u015fenlerine Ay\u0131rma: G\u00fcn, Saat, Dakika, Saniye<\/h3>\n
Matematiksel \u0130\u015flemler<\/h4>\n
const birSaniye = 1000;\nconst birDakika = birSaniye * 60;\nconst birSaat = birDakika * 60;\nconst birGun = birSaat * 24;\n\n\/\/ Kalan g\u00fcnleri hesapla\nconst gunler = Math.floor(farkMilisaniye \/ birGun);\n\n\/\/ Kalan saatleri hesapla (g\u00fcnlerden arta kalan milisaniyeler i\u00e7inde)\nconst saatler = Math.floor((farkMilisaniye % birGun) \/ birSaat);\n\n\/\/ Kalan dakikalar\u0131 hesapla (saatlerden arta kalan milisaniyeler i\u00e7inde)\nconst dakikalar = Math.floor((farkMilisaniye % birSaat) \/ birDakika);\n\n\/\/ Kalan saniyeleri hesapla (dakikalardan arta kalan milisaniyeler i\u00e7inde)\nconst saniyeler = Math.floor((farkMilisaniye % birDakika) \/ birSaniye);<\/code><\/pre>\nS\u0131f\u0131r \u00d6n Eki Ekleme (Padding Zeroes)<\/h4>\n
padStart()<\/code> dize metodu kullan\u0131labilir.<\/p>\nfunction ikiHaneYap(sayi) {\n return sayi < 10 ? '0' + sayi : sayi;\n}\n\n\/\/ Kullan\u0131m\u0131:\n\/\/ const gosterilecekSaat = ikiHaneYap(saatler);\n\/\/ const gosterilecekDakika = ikiHaneYap(dakikalar);\n\/\/ const gosterilecekSaniye = ikiHaneYap(saniyeler);\n\n\/\/ Alternatif ve modern yol: String.prototype.padStart()\n\/\/ const gosterilecekSaat = String(saatler).padStart(2, '0');<\/code><\/pre>\npadStart(2, '0')<\/code> metodu, say\u0131y\u0131 bir dizeye d\u00f6n\u00fc\u015ft\u00fcr\u00fcr ve e\u011fer dize 2 karakterden k\u0131saysa ba\u015f\u0131na '0' ekleyerek 2 karaktere tamamlar.<\/p>\nHTML Yap\u0131s\u0131: Sayac\u0131n G\u00f6r\u00fcnt\u00fclenece\u011fi Alan<\/h3>\n
<\/code> veya <\/p>\nBasit Bir HTML \u015eablonu<\/h4>\n
geriSayimBittiMesaji<\/code> elementi, saya\u00e7 bitti\u011finde g\u00f6sterilecek bir mesaj i\u00e7in yer tutar.<\/p>\nCSS ile Stil Belirleme (Opsiyonel ama iyi olur)<\/h4>\n
#geriSayimSayaci {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 20px;\n font-family: Arial, sans-serif;\n margin-top: 50px;\n}\n\n.zaman-birimi {\n text-align: center;\n background-color: #f0f0f0;\n padding: 15px 20px;\n border-radius: 8px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\n.zaman-birimi span {\n display: block;\n font-size: 3em;\n font-weight: bold;\n color: #333;\n}\n\n.zaman-birimi .etiket {\n font-size: 0.9em;\n color: #666;\n margin-top: 5px;\n}\n\n#geriSayimBittiMesaji {\n text-align: center;\n margin-top: 30px;\n font-size: 1.5em;\n color: #e44d26;\n font-weight: bold;\n}<\/code><\/pre>\nJavaScript Kodu: Ad\u0131m Ad\u0131m Olu\u015fturma<\/h3>\n
De\u011fi\u015fken Tan\u0131mlamalar\u0131<\/h4>\n
\/\/ Hedef tarihi belirle\nconst hedefTarih = new Date(\"Dec 31, 2024 23:59:59\").getTime(); \/\/ Milisaniye cinsinden al\u0131yoruz\n\n\/\/ HTML elementlerini se\u00e7\nconst gunlerEl = document.getElementById('gunler');\nconst saatlerEl = document.getElementById('saatler');\nconst dakikalarEl = document.getElementById('dakikalar');\nconst saniyelerEl = document.getElementById('saniyeler');\nconst geriSayimBittiMesajiEl = document.getElementById('geriSayimBittiMesaji');\nconst geriSayimSayaciEl = document.getElementById('geriSayimSayaci');\n\n\/\/ Zaman birimleri i\u00e7in milisaniye de\u011ferleri\nconst birSaniye = 1000;\nconst birDakika = birSaniye * 60;\nconst birSaat = birDakika * 60;\nconst birGun = birSaat * 24;<\/code><\/pre>\nupdateCountdown<\/code> Fonksiyonu<\/h4>\nfunction ikiHaneYap(sayi) {\n return String(sayi).padStart(2, '0');\n}\n\nfunction updateCountdown() {\n const simdi = new Date().getTime(); \/\/ Mevcut zaman\u0131 milisaniye cinsinden al\n const farkMilisaniye = hedefTarih - simdi;\n\n \/\/ Geri say\u0131m bittiyse\n if (farkMilisaniye < 0) {\n clearInterval(sayacInterval); \/\/ Zamanlay\u0131c\u0131y\u0131 durdur\n geriSayimSayaciEl.style.display = 'none'; \/\/ Sayac\u0131 gizle\n geriSayimBittiMesajiEl.style.display = 'block'; \/\/ Bitti mesaj\u0131n\u0131 g\u00f6ster\n return; \/\/ Fonksiyondan \u00e7\u0131k\n }\n\n \/\/ Zaman fark\u0131n\u0131 hesapla\n const gunler = Math.floor(farkMilisaniye \/ birGun);\n const saatler = Math.floor((farkMilisaniye % birGun) \/ birSaat);\n const dakikalar = Math.floor((farkMilisaniye % birSaat) \/ birDakika);\n const saniyeler = Math.floor((farkMilisaniye % birDakika) \/ birSaniye);\n\n \/\/ HTML elementlerini g\u00fcncelle\n gunlerEl.innerHTML = ikiHaneYap(gunler);\n saatlerEl.innerHTML = ikiHaneYap(saatler);\n dakikalarEl.innerHTML = ikiHaneYap(dakikalar);\n saniyelerEl.innerHTML = ikiHaneYap(saniyeler);\n}<\/code><\/pre>\nsetInterval<\/code> Kullan\u0131m\u0131<\/h4>\nupdateCountdown<\/code> fonksiyonunun her saniye \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak i\u00e7in setInterval<\/code> metodunu kullanaca\u011f\u0131z. Bu metod, belirli bir aral\u0131kta (milisaniye cinsinden) bir fonksiyonu tekrar tekrar y\u00fcr\u00fct\u00fcr.<\/p>\n\/\/ Sayac\u0131 hemen bir kere g\u00fcncelle (ilk y\u00fcklemede do\u011fru de\u011ferleri g\u00f6stermek i\u00e7in)\nupdateCountdown();\n\n\/\/ Her saniye g\u00fcncellemek i\u00e7in setInterval kullan\nconst sayacInterval = setInterval(updateCountdown, 1000); \/\/ Her 1000 milisaniyede (1 saniye) bir \u00e7al\u0131\u015ft\u0131r<\/code><\/pre>\nsetInterval<\/code>'\u0131n d\u00f6nd\u00fcrd\u00fc\u011f\u00fc de\u011feri bir de\u011fi\u015fkende saklamak \u00f6nemlidir, b\u00f6ylece geri say\u0131m bitti\u011finde clearInterval()<\/code> ile zamanlay\u0131c\u0131y\u0131 durdurabiliriz. Aksi takdirde, saya\u00e7 negatif de\u011ferlerle \u00e7al\u0131\u015fmaya devam eder ve gereksiz kaynak t\u00fcketir.<\/p>\nSayac\u0131n Bitmesi Durumu<\/h4>\n
updateCountdown<\/code> fonksiyonunun i\u00e7inde, farkMilisaniye<\/code> de\u011ferinin s\u0131f\u0131r\u0131n alt\u0131na d\u00fc\u015f\u00fcp d\u00fc\u015fmedi\u011fini kontrol ediyoruz. E\u011fer d\u00fc\u015ferse, clearInterval<\/code> ile zamanlay\u0131c\u0131y\u0131 durduruyor, saya\u00e7 elementini gizliyor ve \"geri say\u0131m sona erdi\" mesaj\u0131n\u0131 g\u00f6r\u00fcn\u00fcr hale getiriyoruz.<\/p>\nGeli\u015fmi\u015f \u00d6zellikler ve \u0130yile\u015ftirmeler<\/h3>\n
Dinamik Hedef Tarih Belirleme<\/h4>\n
\n* API Entegrasyonu:<\/strong> Bir etkinlik y\u00f6netim sistemi veya takvim API'sinden etkinlik tarihlerini \u00e7ekebiliriz.
\n* URL Parametreleri:<\/strong> ?targetDate=2025-01-01T00:00:00<\/code> gibi URL parametreleri kullanarak hedef tarihi dinamik olarak ayarlayabiliriz.<\/p>\n\/\/ \u00d6rnek: URL'den hedef tarihi okuma\nfunction getTargetDateFromUrl() {\n const urlParams = new URLSearchParams(window.location.search);\n const dateString = urlParams.get('targetDate');\n if (dateString) {\n const parsedDate = new Date(dateString);\n if (!isNaN(parsedDate.getTime())) { \/\/ Ge\u00e7erli bir tarih mi kontrol et\n return parsedDate.getTime();\n }\n }\n return new Date(\"Dec 31, 2024 23:59:59\").getTime(); \/\/ Varsay\u0131lan tarih\n}\n\nconst hedefTarih = getTargetDateFromUrl();<\/code><\/pre>\nDuraklatma ve Devam Ettirme<\/h4>\n
clearInterval<\/code> ve setInterval<\/code>'\u0131 do\u011fru zamanda \u00e7a\u011f\u0131rarak yap\u0131labilir.<\/p>\nlet isPaused = false;\nlet kalanMilisaniye = 0; \/\/ Duraklat\u0131ld\u0131\u011f\u0131nda kalan s\u00fcreyi saklamak i\u00e7in\n\nfunction togglePause() {\n if (isPaused) {\n \/\/ Devam et\n isPaused = false;\n \/\/ Kalan s\u00fcreden yeni hedef tarihi hesapla\n hedefTarih = new Date().getTime() + kalanMilisaniye;\n sayacInterval = setInterval(updateCountdown, 1000);\n } else {\n \/\/ Duraklat\n isPaused = true;\n clearInterval(sayacInterval);\n const simdi = new Date().getTime();\n kalanMilisaniye = hedefTarih - simdi; \/\/ Kalan s\u00fcreyi kaydet\n }\n}<\/code><\/pre>\nGeri Say\u0131m Bitti\u011finde Yap\u0131lacaklar (Callback Fonksiyonlar\u0131)<\/h4>\n
function geriSayimBittiCallback() {\n console.log(\"Geri say\u0131m sona erdi! \u015eimdi bir \u015feyler yapabiliriz.\");\n \/\/ alert(\"Kampanya bitti!\");\n \/\/ window.location.reload();\n}\n\nfunction updateCountdown() {\n \/\/ ... (\u00f6nceki kod) ...\n\n if (farkMilisaniye < 0) {\n clearInterval(sayacInterval);\n geriSayimSayaciEl.style.display = 'none';\n geriSayimBittiMesajiEl.style.display = 'block';\n geriSayimBittiCallback(); \/\/ Callback fonksiyonunu \u00e7a\u011f\u0131r\n return;\n }\n \/\/ ... (kalan kod) ...\n}<\/code><\/pre>\nKullan\u0131c\u0131 Deneyimi \u0130yile\u015ftirmeleri (Animasyonlar, Sesler)<\/h4>\n
\n* Ses Efektleri:<\/strong> Son saniyelerde bip sesi veya geri say\u0131m bitti\u011finde bir zil sesi \u00e7al\u0131nabilir.
\n* G\u00f6rsel Geri Bildirim:<\/strong> Son dakikalarda say\u0131n\u0131n rengini de\u011fi\u015ftirmek gibi g\u00f6rsel ipu\u00e7lar\u0131 kullan\u0131labilir.<\/p>\nFarkl\u0131 Formatlarda G\u00f6r\u00fcnt\u00fcleme<\/h4>\n
\/\/ Sadece saat:dakika:saniye g\u00f6sterimi i\u00e7in\n\/\/ gunler hesaplamas\u0131n\u0131 atla\n\/\/ saatler = Math.floor(farkMilisaniye \/ birSaat); \/\/ Toplam saatleri hesapla\n\/\/ dakikalar = Math.floor((farkMilisaniye % birSaat) \/ birDakika);\n\/\/ saniyeler = Math.floor((farkMilisaniye % birDakika) \/ birSaniye);<\/code><\/pre>\nMobil Uyumluluk ve Performans<\/h4>\n
setInterval<\/code> yerine requestAnimationFrame<\/code> kullanmak daha ak\u0131c\u0131 animasyonlar sa\u011flayabilir, ancak zamanlay\u0131c\u0131lar i\u00e7in setInterval<\/code> genellikle yeterlidir.<\/p>\nPotansiyel Sorunlar ve \u00c7\u00f6z\u00fcmleri<\/h3>\n
Zaman Dilimi Farkl\u0131l\u0131klar\u0131<\/h4>\n
\n* \u00c7\u00f6z\u00fcm:<\/strong> Hedef tarihi her zaman UTC olarak tan\u0131mlay\u0131n ve hesaplamalar\u0131 da UTC \u00fczerinden yap\u0131n. new Date(\"2025-01-01T00:00:00Z\")<\/code> gibi ISO 8601 format\u0131nda 'Z' (Zulu time, yani UTC) belirteci kullanmak veya Date.UTC()<\/code> metodunu kullanmak bu sorunu \u00e7\u00f6zer. Ancak, e\u011fer saya\u00e7 belirli bir yerel etkinlik i\u00e7inse, hedef tarihi yerel olarak belirlemek ve kullan\u0131c\u0131n\u0131n taray\u0131c\u0131s\u0131n\u0131n yerel zaman dilimini kullanmas\u0131na izin vermek daha uygun olabilir. Bu durumda, kullan\u0131c\u0131lar aras\u0131ndaki zaman dilimi fark\u0131n\u0131n bilincinde olunmal\u0131d\u0131r.<\/p>\nSayfa Yenileme Sorunlar\u0131 (localStorage kullan\u0131m\u0131)<\/h4>\n
\n* \u00c7\u00f6z\u00fcm:<\/strong> localStorage<\/code> veya sessionStorage<\/code> kullanarak saya\u00e7 durumunu (ba\u015flang\u0131\u00e7 zaman\u0131, kalan s\u00fcre vb.) kaydedin. Sayfa y\u00fcklendi\u011finde, depolanan verileri kontrol edin ve geri say\u0131m\u0131 kald\u0131\u011f\u0131 yerden devam ettirin.<\/p>\n\/\/ \u00d6rnek: Ba\u015flang\u0131\u00e7 zaman\u0131n\u0131 kaydetme\nconst baslangicZamaniKey = 'quizBaslangicZamani';\nlet baslangicZamani = localStorage.getItem(baslangicZamaniKey);\n\nif (!baslangicZamani) {\n baslangicZamani = new Date().getTime();\n localStorage.setItem(baslangicZamaniKey, baslangicZamani);\n}\n\n\/\/ Hedef tarihi buna g\u00f6re ayarla (\u00f6rn. 10 dakika sonra)\nconst hedefTarih = parseInt(baslangicZamani) + (10 * birDakika);<\/code><\/pre>\nPerformans Optimizasyonu<\/h4>\n
\n* \u00c7\u00f6z\u00fcm:<\/strong>
\n * Sadece g\u00fcncellenmesi gereken DOM elemanlar\u0131n\u0131 g\u00fcncelleyin.
\n * Gereksiz hesaplamalardan ka\u00e7\u0131n\u0131n.
\n * requestAnimationFrame<\/code> animasyonlar i\u00e7in daha ak\u0131c\u0131 bir deneyim sunsa da, saniyelik g\u00fcncellemeler i\u00e7in setInterval<\/code> genellikle yeterlidir.
\n * Sayfa d\u0131\u015f\u0131na \u00e7\u0131kt\u0131\u011f\u0131nda zamanlay\u0131c\u0131y\u0131 duraklatmak i\u00e7in document.hidden<\/code> veya visibilitychange<\/code> olaylar\u0131n\u0131 kullanabilirsiniz.<\/p>\nKullan\u0131c\u0131 Taraf\u0131ndaki Saat Ayarlar\u0131<\/h4>\n
\n* \u00c7\u00f6z\u00fcm:<\/strong> Bu, istemci taraf\u0131 JavaScript ile tamamen \u00e7\u00f6z\u00fclemeyen bir sorundur. \u00d6nemli uygulamalarda, sunucu taraf\u0131nda bir zaman damgas\u0131 almak ve istemci taraf\u0131ndaki hesaplamalar\u0131 buna g\u00f6re ayarlamak daha g\u00fcvenilirdir. Ancak \u00e7o\u011fu web tabanl\u0131 geri say\u0131m sayac\u0131 i\u00e7in bu genellikle kabul edilebilir bir risktir.<\/p>\n\u00d6rnek Uygulama: Ad\u0131m Ad\u0131m Tam Bir Kod<\/h3>\n
HTML Kodu (
index.html<\/code>)<\/h4>\n\n\n\n \n \n