मेरे पास दो डेमो हैं, एक साथ jQueryऔर एक बिना। न तो दिनांक फ़ंक्शन का उपयोग करें और इसे प्राप्त करने के बारे में सरल हैं।
वेनिला जावास्क्रिप्ट के साथ डेमो
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
<body>
<div>Registration closes in <span id="time">05:00</span> minutes!</div>
</body>
JQuery के साथ डेमो
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 60 * 5,
display = $('#time');
startTimer(fiveMinutes, display);
});
हालाँकि यदि आप एक अधिक सटीक टाइमर चाहते हैं जो केवल थोड़ा अधिक जटिल है:
function startTimer(duration, display) {
var start = Date.now(),
diff,
minutes,
seconds;
function timer() {
// get the number of seconds that have elapsed since
// startTimer() was called
diff = duration - (((Date.now() - start) / 1000) | 0);
// does the same job as parseInt truncates the float
minutes = (diff / 60) | 0;
seconds = (diff % 60) | 0;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (diff <= 0) {
// add one second so that the count down starts at the full duration
// example 05:00 not 04:59
start = Date.now() + 1000;
}
};
// we don't want to wait a full second before the timer starts
timer();
setInterval(timer, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
<body>
<div>Registration closes in <span id="time"></span> minutes!</div>
</body>
अब जब हमने कुछ सरल सरल समय बना लिए हैं तो हम पुन: प्रयोज्य और अलग-अलग चिंताओं के बारे में सोचना शुरू कर सकते हैं। हम यह पूछकर "टाइमर डाउन काउंट क्या करना चाहिए?"
- क्या एक गणना नीचे टाइमर नीचे गिना जाना चाहिए? हाँ
- क्या एक गणना डाउन टाइमर को पता होना चाहिए कि डोम पर खुद को कैसे प्रदर्शित किया जाए? नहीं
- क्या एक गणना डाउन टाइमर 0 तक पहुंचने पर खुद को पुनरारंभ करना जानता है? नहीं
- क्या काउंट डाउन टाइमर क्लाइंट को एक्सेस करने का एक तरीका प्रदान करता है कि कितना समय बचा है? हाँ
तो इन बातों को ध्यान में रखकर लिखने से बेहतर है (लेकिन अभी भी बहुत सरल) CountDownTimer
function CountDownTimer(duration, granularity) {
this.duration = duration;
this.granularity = granularity || 1000;
this.tickFtns = [];
this.running = false;
}
CountDownTimer.prototype.start = function() {
if (this.running) {
return;
}
this.running = true;
var start = Date.now(),
that = this,
diff, obj;
(function timer() {
diff = that.duration - (((Date.now() - start) / 1000) | 0);
if (diff > 0) {
setTimeout(timer, that.granularity);
} else {
diff = 0;
that.running = false;
}
obj = CountDownTimer.parse(diff);
that.tickFtns.forEach(function(ftn) {
ftn.call(this, obj.minutes, obj.seconds);
}, that);
}());
};
CountDownTimer.prototype.onTick = function(ftn) {
if (typeof ftn === 'function') {
this.tickFtns.push(ftn);
}
return this;
};
CountDownTimer.prototype.expired = function() {
return !this.running;
};
CountDownTimer.parse = function(seconds) {
return {
'minutes': (seconds / 60) | 0,
'seconds': (seconds % 60) | 0
};
};
तो यह कार्यान्वयन दूसरों की तुलना में बेहतर क्यों है? यहां कुछ उदाहरण दिए गए हैं कि आप इसके साथ क्या कर सकते हैं। ध्यान दें कि सभी लेकिन पहला उदाहरण startTimerकार्यों द्वारा प्राप्त नहीं किया जा सकता है ।
एक उदाहरण जो XX: XX प्रारूप में समय प्रदर्शित करता है और 00:00 तक पहुंचने के बाद पुनरारंभ होता है
एक उदाहरण जो समय को दो अलग-अलग स्वरूपों में प्रदर्शित करता है
एक उदाहरण जिसमें दो अलग-अलग टाइमर हैं और केवल एक पुनरारंभ होता है
एक उदाहरण जो बटन दबाते ही काउंट डाउन टाइमर शुरू करता है