काउंटडाउन टाइमर का उपयोग पूरे इंटरनेट पर उन लोगों द्वारा किया जाता है जो किसी बड़ी घटना की उलटी गिनती करना चाहते हैं।

आप अपनी नई वेबसाइट के लॉन्च की उलटी गिनती करने के लिए काउंटडाउन टाइमर का उपयोग कर सकते हैं। जब आप किसी उत्पाद की घोषणा करने जा रहे हों तो एक उलटी गिनती टाइमर चिह्नित कर सकता है। आपके लिए तलाशने की बहुत संभावनाएं हैं।

इस गाइड में, हम आपको दिखाएंगे कि तीन तकनीकों का उपयोग करके जावास्क्रिप्ट में उलटी गिनती टाइमर कैसे बनाया जाता है:एचटीएमएल, सीएसएस और जावास्क्रिप्ट। चलिए शुरू करते हैं!

अपना वेबपेज सेट करना

पहला कदम हमारे मूल वेब पेज को सेट करना है। इस गाइड में, हम किसी बाहरी लाइब्रेरी का उपयोग करने के बारे में चिंता करने वाले नहीं हैं। हम इसे सरल रखेंगे और सादे पुराने HTML, CSS और जावास्क्रिप्ट का उपयोग करेंगे।

आइए अपनी HTML फ़ाइल बनाकर शुरू करें:

    
यह लगभग समय है…
 

 

हमारा कोड अभी कुछ खास नहीं लौटाता, नीचे देखें:

ऐसा इसलिए दिखाई देता है क्योंकि हमने अभी तक अपने कोड में कोई शैली नहीं जोड़ी है या अपना जावास्क्रिप्ट टाइमर नहीं बनाया है। आइए जावास्क्रिप्ट बनाने के लिए आगे बढ़ें जो हमारे टाइमर को शक्ति देगा।

हमारा टाइमर बनाना

जावास्क्रिप्ट में दिनांक नामक एक उपयोगी वस्तु है जिसका उपयोग हम तिथियों और समय के साथ काम करने के लिए कर सकते हैं। हम इस ऑब्जेक्ट का उपयोग दो उद्देश्यों के लिए करने जा रहे हैं:उस समय का टाइमस्टैम्प प्राप्त करने के लिए जिसे हम गिनना चाहते हैं, और वर्तमान तिथि प्राप्त करने के लिए।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

इस ट्यूटोरियल में, हम अपनी सभी स्क्रिप्ट्स को टैग में लिखने जा रहे हैं। हम किसी बाहरी स्क्रिप्ट का उपयोग नहीं करने जा रहे हैं।

जिस तिथि को हम अपनी वर्तमान तिथि से घटा रहे हैं, उसे घटाकर हमें इन दो तिथियों के बीच का अंतर मिलेगा:

var timeLeft =+new date("2021-05-04") - +new date();

यह कोड गणना करेगा कि अगले स्टार वार्स दिवस तक कितने दिन बचे हैं, जो कि 4 मई, 2021 है।

जबकि अब हम इन दो दिनों के बीच के अंतर को जानते हैं, कुछ समस्याएं हैं। सबसे पहले, हमारे पास एक टाइमर नहीं है जो अभी तक गिना जाता है। दूसरा, हमारी तिथि मनुष्यों द्वारा आसानी से पठनीय प्रारूप में संग्रहीत नहीं है। यह मिलीसेकंड में संग्रहीत है, जो हमारे लिए बिल्कुल सुविधाजनक नहीं है। हमें समय को दिनों, घंटों और मिनटों में बदलने की जरूरत है।

अधिक पठनीय प्रारूप में शेष समय की गणना करने के लिए, हम निम्नलिखित कोड का उपयोग करने जा रहे हैं:

var dayLeft =Math.floor(timeLeft / (1000 * 60 * 60 * 24));varhoursLeft =Math.floor((timeLeft / (1000 * 60 * 60))% 24);var minsLeft =Math. फ़्लोर ((टाइम लेफ्ट / 1000) / 60% 60);

हम इस कोड का उपयोग करके मानों को एक स्ट्रिंग में प्रारूपित कर सकते हैं:

const timeLeftText =`${daysLeft} दिन ${hoursLeft} घंटे ${minutesLeft} mins.`;

इस कोड में, हम पहले गणना किए गए मानों में स्थानापन्न करने के लिए स्ट्रिंग इंटरपोलेशन का उपयोग करते हैं। यह हमें एक टाइमस्टैम्प देगा जैसे:314 दिन 13 घंटे 52 मिनट।

अब जबकि हमने अपना टाइमस्टैम्प बना लिया है, हम इसे अपने वेबपेज पर रख सकते हैं:

document.getElementById("timer").innerHTML =timeLeftText;

हम अपने सभी कोड को एक फंक्शन में ले जा सकते हैं:

फ़ंक्शन उलटी गिनती () { वर दिन लेफ्ट =मैथ फ्लोर (टाइम लेफ्ट / (1000 * 60 * 60 * 24)); वर घंटे लेफ्ट =मैथ। फ्लोर ((टाइम लेफ्ट / (1000 * 60 * 60))% 24); var minsLeft =Math.floor((timeLeft / 1000) / 60% 60);const timeLeftText =`${daysLeft} दिन ${hoursLeft} घंटे ${minutesLeft} mins.`;document.getElementById("timer").innerHTML =टाइमलेफ्टटेक्स्ट;}उलटी गिनती ();

जब हम अपना पेज लोड करते हैं, तो निम्नलिखित लौटाया जाता है:

अब हमारे पास अपना टाइमर है। हम दिन के लिए कर रहे हैं, है ना? नहीं; इतना शीघ्र नही। यदि आप एक मिनट प्रतीक्षा करते हैं, तो आप देखेंगे कि हमारा टाइमर वास्तव में उलटी गिनती नहीं करता है। ऐसा इसलिए है क्योंकि हमें अपने ब्राउज़र को हर मिनट अपडेट करने के लिए कहना होगा। हम इस कोड का उपयोग करके ऐसा करते हैं:

सेटइंटरवल(उलटी गिनती, 60000);

हमारे उलटी गिनती () फ़ंक्शन घोषित होने के बाद यह कोड जोड़ा जाना चाहिए। यह हमारे पेज को हर 60,000 मिलीसेकंड में रिफ्रेश करेगा। यह हर 60 सेकंड के बराबर है।

अब जब हम अपना कोड अपडेट करते हैं तो आप देखेंगे कि यह हर मिनट बदलता है!

कुछ शैलियां जोड़ना

हमारा काउंटडाउन टाइमर कार्यात्मक हो सकता है, लेकिन यह बिल्कुल सौंदर्य की दृष्टि से मनभावन नहीं है। आइए अपने पेज को और आकर्षक बनाने के लिए कुछ स्टाइल बनाएं: