यह क्या करता है?

आप पृष्ठ पर लक्ष्य तारीख के साथ एक तत्व जोड़ते हैं और यह स्क्रिप्ट उस तारीख को उलटी गिनती के साथ बदल देगी, जब तक कि उस दिन का दिन / घंटा / मिनट / सेकंड नहीं हो जाता।

Installation

काउंटडाउन बनाएँ

एक काउंटडाउन इस फॉर्मेट से बनाया जा सकता है:

<span class="countdown" style="display:none;">Only <span class="countdowndate">January 01 2027 00:00:00</span> until the new year...</span>

"countdown" के अंदर का टेक्स्ट तभी दिखाई देता है जब काउंटडाउन काम कर रहा हो। "countdowndate" से पहले कोई भी टेक्स्ट उलटी गिनती से पहले होगा, और "countdowndate" के बाद कोई भी पाठ उलटी गिनती का अनुसरण करेगा।

ऊपर दिखाया गया उदहारण यह दिखाएगा:

Only January 01 2027 00:00:00 until the new year...(Countdown example)

वर्ग "nocountdown" के साथ एक वैकल्पिक का उपयोग वैकल्पिक पाठ के रूप में किया जा सकता है जब उलटी गिनती स्क्रिप्ट काम नहीं करती है या जब यह लोड हो रहा होता है।

• उदहारण: <span class="nocountdown">नया साल बस आने ही वाला है</span> इस्तेमाल करने से इसका परिणाम होगा नया साल बस आने ही वाला है!" जब तक स्क्रिप्ट लोड होता है। इस span को सीधे काउंटडाउन कोड के बाद रखा जाना चाहिए।

टाइम जोन

ऊपर दिए गए उदाहरण कोड का उपयोग करते हुए, काउंटडाउन पाठक की सिस्टम घड़ी के हिसाब से काम करती है। हालांकि यह नए साल की गिनती जैसे मामलों में उपयोगी हो सकता है, यह दूसरों में अव्यावहारिक है।

काउंटडाउन को एक विशिष्ट टाइम जोन के हिसाब से काम करवाने के दो उपाए हैं। सबसे आसान है कोड के बाद टाइम जोन आइडेंटिफायर इस्तेमाल करने का तरीका। उदाहरणस्वरूप, EST (ईस्टर्न स्टैण्डर्ड टाइम) के हिसाब से काउंटडाउन बनाने के लिए:

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

हालाँकि यह तरीका बोहोत सारे टाइम जोन आइडेंटिफायरो के साथ काम करता है, यह कुछ डेलाइट सेविंग के तरहों के साथ काम नहीं करता। उदाहरणस्वरूप, -5 का ओफ़्सेट वाला EST (ईस्टर्न स्टैण्डर्ड टाइम) के लिए काउंटडाउन के लिए:

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

ध्यान दें कि डेलाइट सेविंग से और तक अपने आप होने वाले परिवर्तन यहाँ अपने-आप नहीं होते हैं, और सदस्य को करना होगा - या तो डेलाइट सेविंग आइडेंटिफायर के साथ, या UTC ऑफसेट का उपयोग करके।

विकल्

काउंटडाउन ख़त्म करना

आप काउंटडाउन को किस तरह ख़त्म करना चाहते हैं? इसके चार उपाए हैं:

1. शून्य से गिनती - यह विरासत के कारणों के लिए डिफ़ॉल्ट है
2. काउंटडाउन कंटेनर को हटाकर
3. काउंटडाउन को शून्य पर रोककर
4. काउंटडाउन को किसी और चीज़ से बदलकर
5. अपनी पसंद के एक कस्टम जावास्क्रिप्ट फ़ंक्शन को लगाके

काउंटअप

यह डिफ़ॉल्ट है, इसलिए आपको कुछ करने की ज़रुरत नहीं।

काउंटडाउन हटाकर

कंटेनर के "remove" वैल्यू पर data-end एट्रिब्यूट लगाए।

<span data-end="remove" class="countdown" style="display:none;"><!--
-->Only <span class="countdowndate">January 01 2027 00:00:00</span> until the new year...<!--
--></span>

रोककर

कंटेनर के "stop" वैल्यू पर data-end एट्रिब्यूट लगाए।

<span data-end="stop" class="countdown" style="display:none;"><!--
-->Only <span class="countdowndate">January 01 2027 00:00:00</span> until the new year...<!--
--></span>

किसी और चीज़ से बदलकर

कंटेनर के "toggle" वैल्यू पर data-end एट्रिब्यूट लगाए। साथ ही साथ, आपको बदलाव की तरफ इशारा करने वाले सिलेक्टर के साथ data-toggle एट्रिब्यूट लगाना होगा।

<span data-end="toggle" data-toggle=".post-countdown" class="countdown" style="display:none;"><!--
-->Only <span class="countdowndate">January 01 2027 00:00:00</span> until the new year...<!--
--></span><span class="post-countdown" style="display:none;">Happy 2027!</span>

data-toggle के विन्दु पर ध्यान रखे! अपेक्षित मान CSS या jQuery सिलेक्टर है। तो यह क्लास के लिए ".name" और ID के लिए "#name" आदि।

यदि काउंटर के बाद टॉगल कंटेनर निम्नलिखित है, तो किसी भी सिलेक्टर को निर्दिष्ट करने की आवश्यकता के बिना, विशेष मूल्य data-toggle="next" का उपयोग किया जा सकता है। उदाहरण के लिए, टेम्पलेट के हिस्से के रूप में कई काउंटडाउन का उपयोग करते समय यह उपयोगी है।

कस्टम कॉलबैक

कंटेनर के "callback" वैल्यू पर data-end एट्रिब्यूट लगाए। इसके अलावा आपको उस फ़ंक्शन के नाम के साथ एक data-callback विशेषता जोड़ना होगा जिसे आप कॉल करना चाहते हैं:

<span data-end="callback" data-callback="myFunction" class="countdown" style="display:none;"><!--
-->Only <span class="countdowndate">January 01 2027 00:00:00</span> until the new year...<!--
--></span>

काउंटडाउन शून्य पर रुक जायेगा और आपका दिया हुआ फंक्शन चालू हो जाएगा। काउंटडाउन कंटेनर फंक्शन का this ऑब्जेक्ट होगा। फ़ंक्शन को काउंटडाउन मॉड्यूल के लिए उपलब्ध करने के लिए, आपको इसे स्वयं मॉड्यूल में जोड़ना होगा:

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

शून्य पर

डिफ़ॉल्ट पर शून्य दिखाया जाएगा:

0 days, 0 hours, 10 minutes and 10 seconds

यदि आप चाहे तो:

10 minutes and 10 seconds

आपको कंटेनर के "no-leading-zeros" वैल्यू पर data-options एट्रिब्यूट लगाना होगा।

<span data-options="no-leading-zeros" class="countdown" style="display:none;"><!--
-->Only <span class="countdowndate">January 01 2027 00:00:00</span> until the new year...<!--
--></span>

Short format

If you prefer to show the countdown in a short format like 2d 5h 30m 1s instead of the full words, you need to add a data-options attribute with the value "short-format".

If you already set the data-options attribute, add all the options separating them with a space:

<span data-options="no-leading-zeros short-format" class="countdown" style="display:none;"><!--
-->Only <span class="countdowndate">January 01 2027 00:00:00</span> until the new year...<!--
--></span>

डायनामिक कंटेंट

यह स्क्रिप्ट डायनामिक सम्मिलित कंटेंट का समर्थन करती है, जैसे कि लेख टिप्पणियाँ या संपादक पूर्वावलोकन। हालाँकि, यदि आप JavaScript के माध्यम से एक काउंटर डालते हैं, तो आपको इस ईवेंट को डालने के बाद आग लगाना होगा:

mw.hook("wikipage.content").fire($("ELEMENT"));

जहाँ काउंटर में लगाए गए तत्त्व के लिए ELEMENT सिलेक्टर है।

Changelog