Countdown with jQuery
So, I have this outputted from my DB:
00:01:53
<span class="jb_timer">00:01:53</span>
开发者_开发问答
So my question is, how can I make it countdown with jQuery?
Thanks.
Here's something that should get you started in the right direction:
var remaining = $("span.jb_timer").text(),
regex = /\d{2}/g,
matches = remaining.match(regex),
hours = matches[0],
minutes = matches[1],
seconds = matches[2],
remainingDate = new Date();
remainingDate.setHours(hours);
remainingDate.setMinutes(minutes);
remainingDate.setSeconds(seconds);
var intvl = setInterval(function () {
var totalMs = remainingDate.getTime(),
hours, minutes, seconds;
remainingDate.setTime(totalMs - 1000);
hours = remainingDate.getHours();
minutes = remainingDate.getMinutes();
seconds = remainingDate.getSeconds();
if (hours === 0 && minutes === 0 && seconds === 0) {
clearInterval(intvl);
}
$("span.jb_timer").text(
(hours >= 10 ? hours : "0" + hours) + ":" +
(minutes >= 10 ? minutes : "0" + minutes) + ":" +
(seconds >= 10 ? seconds : "0" + seconds));
}, 1000);
Working Example: http://jsfiddle.net/andrewwhitaker/YbLj4/
Notes:
- First you have to parse the initial hours, minutes, and seconds out of the
span
's text. Do this using a simple regular expression. - Use
setInterval
to set up a timer that runs every1000
milliseconds. - When that timer fires, subtract 1000 ms from the time and update the
span
's text appropriately. - When the hours, minutes, and seconds reach 0, clear (cancel) the interval.
Here's a very simple one that seems to accomplish exactly what you're looking for. It doesn't have the bells and whistles of the scripts Hanlet linked to, and I think it's a bit simpler than Andrew's solution (even if there are more lines of code... mine doesn't use regular expressions, nor the Date() object).
http://jsfiddle.net/ct3VW/2/
function countDown(timeDiv){
var timeStringArray = timeDiv.text().split(':');
var timeNumberArray = [];
//the following loop simply converts the values in timeStringArray to actual numbers
for(var i = 0; i < 3; i++){
timeNumberArray.push(parseInt(timeStringArray[i],10));
}
timeNumberArray[2]--; //decrement the seconds
if(timeNumberArray[2] < 0 && timeNumberArray[1] > 0){
timeNumberArray[1]--;
timeNumberArray[2] = 59;
}
//this if statement won't have any effect because the sample timer doesn't have any hours at the moment
if(timeNumberArray[1] < 0 && timeNumberArray[0] > 0){
timeNumberArray[0]--;
timeNumberArray[1] = 59;
}
var newTimeString = (timeNumberArray[0] < 10) ? '0' + timeNumberArray[0] : timeNumberArray[0];
for(var i = 1; i < 3; i++){
var timePart = (timeNumberArray[i] < 10) ? ':0' + timeNumberArray[i] : ':' + timeNumberArray[i];
newTimeString += timePart;
}
if(timeNumberArray[2] !== 0){ //don't want to call the function again if we're at 0
timeDiv.text(newTimeString);
setTimeout(
(function(){
countDown(timeDiv)
}),1000);
}else{
//here's where you could put some code that would fire once the counter reaches 0.
}
}
$(function(){
countDown($('div'));
});
There are tons of samples and scripts in the Internet. Maybe you will like one of these
精彩评论