CODEWITHSUNDEEP
javascriptjquery
YaBCK
YaBCK

Reputation: 3029

Set 24 hours remaining countdown

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.

Upvotes: 2

Views: 12948

Answers (5)

Joum
Joum

Reputation: 3245

I 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.net/j1zn0x9c/

EDIT: Mind the corrections I made. This isn't at all linear. Check this answer, too.

Upvotes: 2

adrian_reimer
adrian_reimer

Reputation: 469

can you use moment.js? It can save you a lot of complexity 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);
});

Upvotes: 0

Charlie
Charlie

Reputation: 23838

You should do your homework. So, I will just give you an idea how to modify this.

  1. Your fiveMinutes variable provides the time in seconds. If the value of #checkTime is 5 then fiveMinutes is equal to 300. If you need 24 hours, this variable should be 60 x 60 x 24.

  2. 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 = hours

  3. Modify your display string to show hours too.

Please do your homework now.

Upvotes: 0

Jaffer
Jaffer

Reputation: 2968

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

Upvotes: 0

Gavriel
Gavriel

Reputation: 19237

You can use this small javascript project: http://neswork.com/javascript/alarm-clock/ Either directly or to copy the functionality you want

Upvotes: 0

Related Questions