I am trying to display the time remaining for the next 5 minutes (snapped to the full 5 minutes of the current time e.g., 15:05, 15:10..)

I was able to achieve the same for the time remaining for next Hour (Not minutes):

<span class="timer"></span>
<script>
function secondPassed() {
    var cur_date = new Date();
    var hour = cur_date.getHours();
    var minutes = cur_date.getMinutes();
    var seconds = cur_date.getSeconds();
    var minutes_remain = parseInt(59 - parseInt(minutes));
    var seconds_remain = parseInt(60 - parseInt(seconds));

    var timers = document.getElementsByClassName('timer');
    for (var i = 0; i < timers.length; i++) {
        timers[i].innerHTML = minutes_remain+":"+seconds_remain;
    }

}

var countdownTimer = setInterval(secondPassed, 1000);
</script>

JSfiddle : /

I am trying to display the time remaining for the next 5 minutes (snapped to the full 5 minutes of the current time e.g., 15:05, 15:10..)

I was able to achieve the same for the time remaining for next Hour (Not minutes):

<span class="timer"></span>
<script>
function secondPassed() {
    var cur_date = new Date();
    var hour = cur_date.getHours();
    var minutes = cur_date.getMinutes();
    var seconds = cur_date.getSeconds();
    var minutes_remain = parseInt(59 - parseInt(minutes));
    var seconds_remain = parseInt(60 - parseInt(seconds));

    var timers = document.getElementsByClassName('timer');
    for (var i = 0; i < timers.length; i++) {
        timers[i].innerHTML = minutes_remain+":"+seconds_remain;
    }

}

var countdownTimer = setInterval(secondPassed, 1000);
</script>

JSfiddle : http://jsfiddle/ov0oo5f7/

• javascript

• So what's the problem then ? – Voonic Commented Sep 24, 2014 at 11:46
• I need it to give the time remaining for the next five min not for the next hour – mediaroot Commented Sep 24, 2014 at 11:47

7 Answers 7

Something like this?

function secondPassed() {
    var cur_date = new Date();
    var minutes = cur_date.getMinutes();
    var seconds = cur_date.getSeconds();
    
    var timers = document.getElementsByClassName('timer');
    for (var i = 0; i < timers.length; i++) {
        timers[i].innerHTML = (4 - minutes % 5) + ":" + (seconds >= 50 ? "0" : "") + (59 - seconds);
    }
    
}

var countdownTimer = setInterval(secondPassed, 1000);

<span class="timer"></span>

You can reduce the code a bit and to make it more accurate, use setTimeout and call the function as close as reasonable to the next full second. setInterval will slowly drift.

// Return the time to next 5 minutes as m:ss
function toNext5Min() {

  // Get the current time
  var secs = (new Date() / 1000 | 0) % 300;

  // Function to add leading zero to single digit numbers
  function z(n){return (n < 10? '0' : '') + n;}

  // Return m:ss
  return (5 - secs/60 | 0) + ':' + z(60 - (secs%60 || 60));
}

// Call the function just after the next full second
function runTimer() {
  console.log(toNext5Min());
  var now = new Date();
  setTimeout(runTimer, 1020 - now % 1000);
}

The above ticks over on the full minute so that at say 10:00:00 it shows 5:00. If you'd rather is showed 0:00, then the last line of toNext5Min should be:

  return (5 - (secs? secs/60 : 5) | 0) + ':' + z(60 - (secs%60 || 60));

This is what you need to change to get it to work the way you want:

var minutes = cur_date.getMinutes();
var seconds = cur_date.getSeconds();

try change it to this:

var minutes_remain = 5 - minutes%5 - 1;
var seconds_remain = 59 - seconds;

Try it out here: jsFiddle

Change your minutes remain to following line. It calculates current minute mod by 5 subtracted from 5, which is what you need.

function secondPassed() {
    var cur_date = new Date();
    var hour = cur_date.getHours();
    var minutes = cur_date.getMinutes();
    var seconds = cur_date.getSeconds();
    var minutes_remain = parseInt(5 - parseInt(minutes%5));
    var seconds_remain = parseInt(60 - parseInt(seconds));

    var timers = document.getElementsByClassName('timer');
    for (var i = 0; i < timers.length; i++) {
        timers[i].innerHTML = minutes_remain+":"+seconds_remain;
    }

}

var countdownTimer = setInterval(secondPassed, 1000);

Updated fiddle http://jsfiddle/ov0oo5f7/2/

You can work out what the next 5 minutes interval will be if you divide by 5, round it up, and multiply by 5 again.

You need to handle if you are on an exact minute otherwise minutes_remain will show as 1 minute less.

In terms of being accurate, you don't need to parseInt everywhere as they are all numbers already. I've tried to make it as efficient as possible. In any case, you are only checking it once a second, so you can't guarantee accuracy.

http://jsfiddle/ov0oo5f7/6/

function secondPassed() {
    var cur_date = new Date();

    var hour = cur_date.getHours();

    // handle 0 seconds - would be 60 otherwise
    var seconds_remain = 60 - (cur_date.getSeconds() || 60);

    // handle ceil on 0 seconds - otherwise out by a minute
    var minutes = cur_date.getMinutes() + (seconds_remain == 0 ? 0 : 1);
    var minutes_remain = Math.ceil(minutes/5) * 5 - minutes;

    var timers = document.getElementsByClassName('timer');
    for (var i = 0; i < timers.length; i++) {
        timers[i].innerHTML = minutes_remain+":"+seconds_remain;
    }

}

var countdownTimer = setInterval(secondPassed, 1000);

If you are looking for the mechine time and counting it down for 5 minutes , then this might help -

var startTime = new Date();
function secondPassed() {

    var cur_date = new Date();

    if(parseInt((cur_date - startTime)/1000) >300 ){
        window.clearInterval(countdownTimer);
    }
    var hour = cur_date.getHours();
    var minutes = cur_date.getMinutes();
    var seconds = cur_date.getSeconds();
    var minutes_remain = parseInt(59 - parseInt(minutes));
    var seconds_remain = parseInt(60 - parseInt(seconds));

    var timers = document.getElementsByClassName('timer');
    for (var i = 0; i < timers.length; i++) {
        timers[i].innerHTML = minutes_remain+":"+seconds_remain;
    }

}

var countdownTimer = setInterval(secondPassed, 1000);

A simple approach is nothing that 5 minutes are 5*60*1000 milliseconds, thus

var k = 5*60*1000;
var next5 = new Date(Math.ceil((new Date).getTime()/k)*k);