काउंटडाउन टाइमर्स का उपयोग इंटरनेट पर उन लोगों द्वारा किया जाता है जो किसी बड़े इवेंट की उलटी गिनती करना चाहते हैं।
आप अपनी नई वेबसाइट के लॉन्च की उलटी गिनती के लिए काउंटडाउन टाइमर का उपयोग कर सकते हैं। काउंटडाउन टाइमर तब चिह्नित कर सकता है जब आप उत्पाद घोषणा करने जा रहे हों। आपके लिए खोजने की बहुत सारी संभावनाएं हैं।
इस गाइड में, हम आपको दिखाएंगे कि HTML, CSS और जावास्क्रिप्ट - तीन तकनीकों का उपयोग करके जावास्क्रिप्ट में काउंटडाउन टाइमर कैसे बनाया जाए। आइए शुरू करें!
हमारा वेबपेज सेट करना
पहला कदम हमारे बेसिक वेब पेज को सेट करना है। इस गाइड में, हम किसी बाहरी लाइब्रेरी का उपयोग करने के बारे में चिंता नहीं करेंगे। हम इसे सरल रखेंगे और सादे HTML, CSS और जावास्क्रिप्ट का उपयोग करेंगे।
आइए अपनी HTML फाइल बनाकर शुरू करें:
<!DOCTYPE html> <html> <script> // We'll store our JavaScript code here </script> <style> // We'll write our CSS styles here </style> <body> <h1>It's almost time…</h1> <div id="timer"></div> </body> </html>
हमारा कोड अभी कुछ खास नहीं लौटाता, नीचे देखें:
यह इस तरह दिखाई देता है क्योंकि हमने अभी तक अपने कोड में कोई स्टाइल नहीं जोड़ा है या अपना जावास्क्रिप्ट टाइमर नहीं बनाया है। आइए उस जावास्क्रिप्ट को बनाने पर आगे बढ़ें जो हमारे टाइमर को शक्ति देगा।
हमारा टाइमर बनाना
जावास्क्रिप्ट में Date नामक एक उपयोगी ऑब्जेक्ट है जिसका उपयोग हम तारीखों और समय के साथ काम करने के लिए कर सकते हैं। हम इस ऑब्जेक्ट का उपयोग दो उद्देश्यों के लिए करने जा रहे हैं: उस समय का टाइमस्टैम्प प्राप्त करने के लिए जिस तक हम उलटी गिनती करना चाहते हैं, और वर्तमान तारीख प्राप्त करने के लिए।
इस ट्यूटोरियल में, हम अपने सभी स्क्रिप्ट्स को <script></script> टैग में लिखने जा रहे हैं। हम किसी बाहरी स्क्रिप्ट का उपयोग नहीं करने जा रहे हैं।
जिस तारीख तक हम उलटी गिनती कर रहे हैं, उसे हमारी वर्तमान तारीख से घटाने से हमें इन दो तारीखों के बीच का अंतर मिलेगा:
var timeLeft = +new Date("2021-05-04") - +new Date();
यह कोड गणना करेगा कि अगले स्टार वॉर्स डे तक कितने दिन बचे हैं, जो 4 मई, 2021 है।
जबकि अब हमें इन दो दिनों के बीच का अंतर पता है, कुछ समस्याएं हैं। पहला, हमारे पास अभी तक उलटी गिनती करने वाला टाइमर नहीं है। दूसरा, हमारी तारीख मनुष्यों द्वारा आसानी से पढ़े जाने योग्य प्रारूप में स्टोर नहीं है। यह मिलीसेकंड में स्टोर है, जो हमारे लिए बिल्कुल सुविधाजनक नहीं है। हमें समय को दिनों, घंटों और मिनटों में बदलने की आवश्यकता है।
शेष समय को अधिक पठनीय प्रारूप में गणना करने के लिए, हम निम्न कोड का उपयोग करने जा रहे हैं:
var daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); var hoursLeft = Math.floor((timeLeft / (1000 * 60 * 60)) % 24); var minutesLeft = Math.floor((timeLeft / 1000) / 60 % 60);
हम मानों को इस कोड का उपयोग करके स्ट्रिंग में फॉर्मेट कर सकते हैं:
const timeLeftText = `${daysLeft} days ${hoursLeft} hours ${minutesLeft} minutes.`;
इस कोड में, हम पहले गणना किए गए मानों को प्रतिस्थापित करने के लिए स्ट्रिंग इंटरपोलेशन का उपयोग करते हैं। यह हमें इस तरह टाइमस्टैम्प देगा: 314 days 13 hours 52 minutes।
अब जब हमने अपना टाइमस्टैम्प उत्पन्न कर लिया है, तो हम इसे अपने वेबपेज पर रख सकते हैं:
document.getElementById("timer").innerHTML = timeLeftText;
हम अपने सभी कोड को एक फंक्शन में ले जा सकते हैं:
function countdown() { var daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); var hoursLeft = Math.floor((timeLeft / (1000 * 60 * 60)) % 24); var minutesLeft = Math.floor((timeLeft / 1000) / 60 % 60); const timeLeftText = `${daysLeft} days ${hoursLeft} hours ${minutesLeft} minutes.`; document.getElementById("timer").innerHTML = timeLeftText; } countdown();
जब हम अपना पेज लोड करते हैं, तो निम्नलिखित लौटाया जाता है:
अब हमारे पास हमारा टाइमर है। हम दिन के लिए हो गए, है ना? नहीं; इतनी तेजी से नहीं। यदि आप एक मिनट प्रतीक्षा करते हैं, तो आप देखेंगे कि हमारा टाइमर वास्तव में उलटी गिनती नहीं करता। ऐसा इसलिए है क्योंकि हमें अपने ब्राउज़र को हर मिनट अपडेट करने के लिए बताने की आवश्यकता है। हम इसे इस कोड का उपयोग करके करते हैं:
setInterval(countdown, 60000);
यह कोड हमारे countdown() फंक्शन घोषित होने के बाद जोड़ा जाना चाहिए। यह हमारे पेज को हर 60,000 मिलीसेकंड पर रीफ्रेश करेगा। यह हर 60 सेकंड के बराबर है।
अब जब हम अपना कोड अपडेट करते हैं तो आप देखेंगे कि यह हर मिनट बदलता है!
कुछ स्टाइल्स जोड़ना
हमारा काउंटडाउन टाइमर कार्यात्मक हो सकता है, लेकिन यह बिल्कुल सौंदर्यपूर्ण नहीं है। आइए अपने पेज को अधिक आकर्षक बनाने के लिए कुछ स्टाइल्स बनाएं:
<style> body { padding-top: 20%; height: 100vh; background: linear-gradient(to bottom right, #CAA89C, #434EFC); } h1, p { text-align: center; color: white; } </style>
हमारा वेबपेज अब इस तरह दिखता है:
जैसा कि आप देख सकते हैं, हमारे पेज में अब ग्रेडिएंट बैकग्राउंड है, हमारा टेक्स्ट केंद्र में संरेखित है और हमारा टेक्स्ट सफेद दिखाई देता है। यह बहुत अच्छा लग रहा है!
निष्कर्ष
काउंटडाउन टाइमर्स कई साइट्स की एक महत्वपूर्ण विशेषता हैं। आप व्यक्तिगत और व्यावसायिक दोनों वेब पेजों पर काउंटडाउन देखेंगे। किसी व्यक्ति के ब्लॉग में उनकी शादी की उलटी गिनती हो सकती है। कंपनी की वेबसाइट में उत्पाद लॉन्च की उलटी गिनती हो सकती है।
अब आप एक विशेषज्ञ की तरह अपना खुद का जावास्क्रिप्ट काउंटडाउन टाइमर बनाने के लिए तैयार हैं!
