2

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.

YaBCK
  • 2,949
  • 4
  • 32
  • 61
  • 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 Jan 12 '16 at 15:26
  • @JonKoops - This is a pet project and I don't want to use jQuery plugin – YaBCK Jan 12 '16 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 Jan 12 '16 at 15:32
  • Not really, though for debugging purposes I'd recommend using a set number until the rest of the logic is functional. – Jon Koops Jan 12 '16 at 15:37
  • Note that the first line in your `Timer` function is not correct (`var timer = duration, minutes, seconds;`). You can't assign and create new variables at the same time. Also since the `minutes` and `seconds` variables are only used inside the anonymous function you should define them there. – Jon Koops Jan 12 '16 at 15:40
  • @JonKoops can you explain what you mean with your 2nd phrase? I believe there's nothing wrong with the variable creation/assignment here. – Joum Jan 13 '16 at 12:04
  • @Joum It's basically what I said before. The variables are only used within the setInterval so they should be declared there as well. – Jon Koops Jan 13 '16 at 14:45
  • The assignment is valid though, but the value will be `undefined`. Just looks hard to read. – Jon Koops Jan 13 '16 at 14:52
  • @JonKoops undefined but just until it's updated at the beginning of the callback, so no problem! :P – Joum Jan 13 '16 at 14:56
  • Still, makes more sense to keep it in scope where it belongs. Might cause state to leak where it shouldn't when more code is added in the future. – Jon Koops Jan 13 '16 at 15:20

5 Answers5

2

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.

Community
  • 1
  • 1
Joum
  • 3,189
  • 3
  • 33
  • 64
0

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

Gavriel
  • 18,880
  • 12
  • 68
  • 105
0

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

Oxi
  • 2,918
  • 17
  • 28
0

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.

Charlie
  • 22,886
  • 11
  • 59
  • 90
  • 3
    Not mean to be a drag, but the sanctimonious "do your homework" bits are a bit uncalled for. Specially when you don't even shed that much light over his issue. – Joum Jan 12 '16 at 15:57
  • I shed more light than you. My light even covered the aspect of his voluntary understanding of code than seeking full solution from outside. – Charlie Jan 13 '16 at 07:13
  • K dude... have a nice one! – Joum Jan 13 '16 at 11:11
0

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);
});
adrian_reimer
  • 459
  • 5
  • 10