Okay as you can probably tell from the title of this post. I'm trying to work how to create a 24 hour remaining count down clock. I just can't get my head around how to work this out.
I've got it working with 5 minutes, but I just need a nudge in the right direction on how to turn this into hours instead of
JSFiddle Demo
HTML:
<body>
<input type="text" value="5">
<div>Time Remaining <span id="remainingTime">05:00</span> minutes!</div>
</body>
JavaScript/jQuery:
function Timer(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 * jQuery('#checkTime').val();
var display = $('#remainingTime');
Timer(fiveMinutes, display);
});
No plugins please.
Okay as you can probably tell from the title of this post. I'm trying to work how to create a 24 hour remaining count down clock. I just can't get my head around how to work this out.
I've got it working with 5 minutes, but I just need a nudge in the right direction on how to turn this into hours instead of
JSFiddle Demo
HTML:
<body>
<input type="text" value="5">
<div>Time Remaining <span id="remainingTime">05:00</span> minutes!</div>
</body>
JavaScript/jQuery:
function Timer(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 * jQuery('#checkTime').val();
var display = $('#remainingTime');
Timer(fiveMinutes, display);
});
No plugins please.
Share Improve this question edited Jan 12, 2016 at 15:33 YaBCK asked Jan 12, 2016 at 15:23 YaBCKYaBCK 3,0294 gold badges36 silver badges71 bronze badges 10- This has been said a thousand times before I know, but why not use a simple jQuery plugin for this? Especially since you are already loading jQuery as a dependency. Or is this a pet project to learn how to build a timer? – Jon Koops Commented Jan 12, 2016 at 15:26
- @JonKoops - This is a pet project and I don't want to use jQuery plugin – YaBCK Commented Jan 12, 2016 at 15:29
- @JonKoops I am probably being stupid with this and the answer being 60 * 60 * whatever number is in the input field? – YaBCK Commented Jan 12, 2016 at 15:32
- Not really, though for debugging purposes I'd remend using a set number until the rest of the logic is functional. – Jon Koops Commented Jan 12, 2016 at 15:37
-
Note that the first line in your
Timerfunction is not correct (var timer = duration, minutes, seconds;). You can't assign and create new variables at the same time. Also since theminutesandsecondsvariables are only used inside the anonymous function you should define them there. – Jon Koops Commented Jan 12, 2016 at 15:40
5 Answers
Reset to default 2I changed your fiddle a bit,
function Timer(duration, display)
{
var timer = duration, hours, minutes, seconds;
setInterval(function () {
hours = parseInt((timer /3600)%24, 10)
minutes = parseInt((timer / 60)%60, 10)
seconds = parseInt(timer % 60, 10);
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(hours +":"+minutes + ":" + seconds);
--timer;
}, 1000);
}
jQuery(function ($)
{
var twentyFourHours = 24 * 60 * 60;
var display = $('#remainingTime');
Timer(twentyFourHours, display);
});
Check it out here: http://jsfiddle/j1zn0x9c/
EDIT: Mind the corrections I made. This isn't at all linear. Check this answer, too.
You can use this small javascript project: http://neswork./javascript/alarm-clock/ Either directly or to copy the functionality you want
Just doing inside a setTimeout will slip the timer eventually .
Better to do something like shown below
function timerUpdate() {
var currentTime = new Date();
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
setTimeout(timerUpdate,1000);
//Update the hour, minute and second in UI
}
what i mean is, sync your countdown frequently. also the 1 second timer can be improved using 2 timer or with a bigger delay
You should do your homework. So, I will just give you an idea how to modify this.
Your
fiveMinutesvariable provides the time in seconds. If the value of#checkTimeis 5 thenfiveMinutesis equal to 300. If you need 24 hours, this variable should be60 x 60 x 24.Now when this number of seconds is passed inside the function, it breaks the number down to minutes and seconds.
minutes = parseInt(timer / 60, 10); //n secs div 60 = minutes seconds = parseInt(timer % 60, 10);You need to add hours to this.
hours = parseInt(timer / 60 * 60) // (n secs div 60 = mins) div 60 = hoursModify your
displaystring to show hours too.
Please do your homework now.
can you use moment.js? It can save you a lot of plexity when working with times in your code. jsFiddle
code:
function Timer(duration, display)
{
var myInterval = setInterval(function () {
var subtract = duration.subtract(1, 'seconds');
var formatted = moment(subtract).format('HH:mm:ss');
if(formatted === '00:00:00'){
clearInterval(myInterval);
}
display.text(formatted);
}, 1000);
}
jQuery(function ($)
{
var fiveMinutes = moment().hours(23).minutes(59).seconds(59);
var display = $('#remainingTime');
Timer(fiveMinutes, display);
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744228747a4564138.html
评论列表（0条）