Ne yapar

Sayfaya hedef tarihi olan bir öge eklersiniz ve bu betik, o tarihin günü/saati/dakika/saniyesine ulaşılana kadar bu tarihi bir geri sayımla değiştirir.

Installation

Geri sayım oluşturma

Aşağıdaki format kullanılarak bir sayfaya geri sayım eklenebilir:

<span class="countdown" style="display:none;">Yalnızca <span class="countdowndate">January 01 2027 00:00:00</span> tarihine kadar yeni yıla...</span>

"countdown" içindeki metin yalnızca geri sayım etkinken görünür. "countdowndate"den önceki herhangi bir metin geri sayımdan önce gelir ve "countdowndate" metinden sonraki herhangi bir metin geri sayımı takip eder.

Yukarıdaki örnek şunları üretir:

Yalnızca January 01 2027 00:00:00 tarihine kadar yeni yıla...(Geri sayım örneği)

Geri sayım betik çalışmadığında veya yüklenirken alternatif metin olarak "nocountdown" sınıfına sahip isteğe bağlı bir yayılma kullanılabilir.

• Örneğin, <span class="nocountdown">Neredeyse yeni yıl!</span> yazıldığında
  "Neredeyse yeni yıl!" betik yüklenirken.

Bu aralık, yukarıdaki geri sayım kodundan hemen sonra yerleştirilmelidir.

Zaman dilimleri

Yukarıdaki örnek kodu kullanarak, geri sayım okuyucunun sistem saatine göre çalışır. Bu, yeni yıla geri sayım gibi durumlarda faydalı olabilirken, diğerlerinde pratik değildir.

Geri sayımın belirli bir zaman dilimine göre çalışmasını sağlamak için iki yöntem kullanılabilir. En kolayı, saat dilimi tanımlayıcısını kodun sonuna eklemektir. Örneğin, Doğu Standart Saati (EST) için geri sayım yapmak için:

<span class="countdowndate">January 01 2027 00:00:00 EST</span>

Bu yöntem çoğu tanımlayıcıyla çalışırken, bazı yaz saati türevlerinde (örneğin, İngiliz Yaz Saati - BST) çalışmaz.

Alternatif ve daha güvenilir bir yöntem, Koordineli Evrensel Zaman (UTC) ofsetini kodun sonuna eklemektir. Örneğin, -5 saatlik bir ofseti olan EST için geri sayım yapmak için:

<span class="countdowndate">January 01 2027 00:00:00 -0500</span>

Gün ışığından yararlanmaya yönelik değişikliklerin otomatik olarak yapılmadığını ve kullanıcı tarafından gün ışığından yararlanma tanımlayıcısı veya UTC ofseti kullanılarak yapılması gerektiğini unutmayın.

Seçenekler

Geri Sayımı Bitirme

Geri sayımın nasıl bitmesini istersiniz? Beş seçenek vardır:

1. sıfırdan yukarı sayma. Bu, eski nedenlerden dolayı varsayılan değerdir
2. geri sayım kabının kaldırılması
3. geri sayımı sıfırda durdurma
4. geri sayımı başka bir şeyle değiştirme
5. seçtiğiniz özel bir JavaScript işlevini çağırma

Sayma

Bu varsayılan seçenek olduğundan, herhangi bir şey yapmanıza gerek yoktur.

Kaldır

Kapsayıcıya "remove" değerine sahip bir data-end özniteliği ekleyin:

<span data-end="remove" class="countdown" style="display:none;"><!--
-->Yalnızca <span class="countdowndate">January 01 2027 00:00:00</span> tarihine kadar yeni yıla...<!--
--></span>

Durdur

Kapsayıcıya "stop" değerine sahip bir data-end özniteliği ekleyin:

<span data-end="stop" class="countdown" style="display:none;"><!--
-->Yalnızca <span class="countdowndate">January 01 2027 00:00:00</span> tarihine kadar yeni yıla...<!--
--></span>

Yerleştirme

Kapsayıcıya "toggle" değerine sahip bir data-end özniteliği ekleyin. Ek olarak, değiştirmeye işaret eden bir seçiciyle bir data-toggle özniteliği eklemeniz gerekecektir:

<span data-end="toggle" data-toggle=".post-countdown" class="countdown" style="display:none;"><!--
-->Yalnızca <span class="countdowndate">January 01 2027 00:00:00</span> tarihine kadar yeni yıla...<!--
--></span><span class="post-countdown" style="display:none;">Mutlu 2027!</span>

data-toggle değerindeki noktaya dikkat edin! Beklenen değer, bir CSS veya jQuery seçicisidir. Yani bu, sınıflar için ".ad". Kimlikler için "#ad". Vb.

Alternatif olarak, açma/kapama kabı sayacın ardından gelen ise, herhangi bir seçici belirtmeye gerek kalmadan bunun yerine data-toggle="next" özel değeri kullanılabilir. Bu, örneğin bir şablonun parçası olarak birden çok geri sayım kullanıldığında yararlıdır.

Özel Geri Çağırma

Kapsayıcıya "callback" değerine sahip bir data-end özniteliği ekleyin. Ek olarak, çağırmak istediğiniz işlevin adıyla bir data-callback özniteliği eklemeniz gerekecektir:

<span data-end="callback" data-callback="myFunction" class="countdown" style="display:none;"><!--
-->Yalnızca <span class="countdowndate">January 01 2027 00:00:00</span> tarihine kadar yeni yıla...<!--
--></span>

Geri sayım sıfırda duracak ve ardından işleviniz çağrılacaktır. Geri sayım kabı, işlevin this nesnesi olacaktır.

İşlevi Geri Sayım modülünde kullanılabilir hale getirmek için, onu modülün kendisine eklemeniz gerekir:

window.countdownTimer = {
    myFunction: function () {
       $(this).text("Mutlu 2027!");
    }
}

Öncü Sıfırları

Varsayılan olarak baştaki sıfırlar gösterilecektir:

0 gün, 0 saat, 10 dakika ve 10 saniye

Bunun yerine bunu tercih ederseniz:

10 dakika 10 saniye

"no-leading-zeros" değerine sahip bir data-options özniteliği eklemeniz gerekir:

<span data-options="no-leading-zeros" class="countdown" style="display:none;"><!--
-->Yalnızca <span class="countdowndate">January 01 2027 00:00:00</span> tarihine kadar yeni yıla...<!--
--></span>

Kısa biçim

Geri sayımı tam kelimeler yerine 2d 5h 30m 1s gibi kısa bir biçimde göstermeyi tercih ederseniz, "short-format" değerine sahip bir data-options özniteliği eklemeniz gerekir.

data-options özniteliğini zaten ayarladıysanız, aralarında bir boşluk bırakarak tüm seçenekleri ekleyin:

<span data-options="no-leading-zeros short-format" class="countdown" style="display:none;"><!--
-->Yalnızca <span class="countdowndate">January 01 2027 00:00:00</span> tarihine kadar yeni yıla...<!--
--></span>

Dinamik içerik

Bu betik, madde yorumları veya düzenleyici önizlemeleri gibi dinamik olarak eklenen içeriği destekler. Ancak, JavaScript aracılığıyla bir sayaç eklerseniz, bu olayı ekledikten sonra başlatmanız gerekir:

mw.hook("wikipage.content").fire($("ÖGE"));

Burada ÖGE, sayacın eklendiği ögenin seçicisidir.

Değişiklik günlüğü