काउंटडाउन टाइमर आपकी वेब एप्लीकेशन्स में इंटरैक्टिवटी और तत्कालता का अद्भुत एहसास जोड़ने का एक शानदार तरीका हैं। यह गाइड जावास्क्रिप्ट में कस्टमाइजेबल काउंटडाउन टाइमर बनाने का एक व्यापक तरीका प्रदान करता है, जिसमें बुनियादी कार्यान्वयन से लेकर उन्नत सुविधाओं तक सब कुछ शामिल है।
विषय सूची
- एक बुनियादी काउंटडाउन टाइमर बनाना
- अपने काउंटडाउन टाइमर को कस्टमाइज़ करना
- उन्नत काउंटडाउन टाइमर सुविधाएँ
एक बुनियादी काउंटडाउन टाइमर बनाना
आइए एक साधारण काउंटडाउन टाइमर से शुरुआत करें जो 10 सेकंड से गिनती करता है। यह उदाहरण केवल HTML और जावास्क्रिप्ट का उपयोग करता है, जिससे इसे समझना और लागू करना आसान हो जाता है।
<!DOCTYPE html>
<html>
<head>
<title>काउंटडाउन टाइमर</title>
</head>
<body>
<p>काउंटडाउन: <span id="countdown">10</span> सेकंड</p>
<script>
let timeLeft = 10;
const countdownElement = document.getElementById("countdown");
const timerInterval = setInterval(function() {
if (timeLeft <= 0) {
clearInterval(timerInterval);
countdownElement.textContent = "समय समाप्त!";
} else {
countdownElement.textContent = timeLeft;
timeLeft--;
}
}, 1000);
</script>
</body>
</html>
यह कोड पहले एक प्रारंभिक timeLeft वेरिएबल सेट करता है। फिर, यह हर सेकंड में बार-बार एक फ़ंक्शन निष्पादित करने के लिए setInterval का उपयोग करता है। यह फ़ंक्शन timeLeft को घटाता है और प्रदर्शित काउंटडाउन को अपडेट करता है। एक बार timeLeft 0 तक पहुँच जाने पर, अंतराल साफ़ हो जाता है, और “समय समाप्त!” प्रदर्शित होता है।
अपने काउंटडाउन टाइमर को कस्टमाइज़ करना
आइए उपयोगकर्ता द्वारा परिभाषित इनपुट और स्वरूपित आउटपुट के साथ अपने टाइमर को बढ़ाएँ।
let startTime = parseInt(prompt("सेकंड में काउंटडाउन समय दर्ज करें:", 10);
let timeLeft = startTime;
const countdownElement = document.getElementById("countdown");
const timerInterval = setInterval(function() {
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
const formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
if (timeLeft <= 0) {
clearInterval(timerInterval);
countdownElement.textContent = "समय समाप्त!";
} else {
countdownElement.textContent = formattedTime;
timeLeft--;
}
}, 1000);
यह बेहतर संस्करण उपयोगकर्ता से प्रारंभिक समय के लिए संकेत करता है, मिनट और सेकंड को संभालता है, और बेहतर पठनीयता (MM:SS) के लिए आउटपुट को स्वरूपित करता है।
उन्नत काउंटडाउन टाइमर सुविधाएँ
टाइमर को और भी बहुमुखी बनाने के लिए, इन संवर्द्धनों पर विचार करें:
- ईवेंट हैंडलिंग: जब टाइमर शून्य तक पहुँच जाता है तो एक फ़ंक्शन ट्रिगर करें। इसका उपयोग फ़ॉर्म सबमिट करने, उपयोगकर्ता को रीडायरेक्ट करने या कोई अन्य क्रिया करने के लिए किया जा सकता है।
- पॉज़/रिज्यूम कार्यक्षमता: काउंटडाउन को पॉज़ और रिज्यूम करने के लिए बटन जोड़ें।
- CSS के साथ स्टाइलिंग: कस्टम CSS के साथ अपने टाइमर के दृश्य आकर्षण में सुधार करें।
इन तकनीकों को मिलाकर, आप अपने वेब प्रोजेक्ट्स के लिए उच्च कार्यात्मक और दृष्टिगत रूप से आकर्षक काउंटडाउन टाइमर बना सकते हैं।