Use current time and count down to hour and reset to next hour countdown

Question

I am more a php programmer and Java scripting is still new to me. There are allot of counter scripts and questions, but nothing which I can find to do the following. I am using the following script as my base script: Styled JavaScript Countdown Clock

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);

body{
 text-align: center;
 background: #00ECB9;
  font-family: sans-serif;
  font-weight: 100;
}

h1{
  color: #396;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
}

#clockdiv{
 font-family: sans-serif;
 color: #fff;
 display: inline-block;
 font-weight: 100;
 text-align: center;
 font-size: 30px;
}

#clockdiv > div{
 padding: 10px;
 border-radius: 3px;
 background: #00BF96;
 display: inline-block;
}

#clockdiv div > span{
 padding: 15px;
 border-radius: 3px;
 background: #00816A;
 display: inline-block;
}

.smalltext{
 padding-top: 5px;
 font-size: 16px;
}

<h1>Countdown Clock</h1>
<div id="clockdiv">
  <div>
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>

I want to use the current time and let it count down to the next hour, on which it will reset and start again. So on the hour it will be 00:00 (min/sec) and then reset to count down from 59:59 again. Please help!!!

Answer 1

By subtracting the current minutes * 60 + seconds from 3600 you get the time to the next full hour. Let's add 100 days so the countdown will work for the next 100 days.

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var now = Date.parse(new Date());
var seconds = Math.floor((now / 1000) % 60);
var minutes = Math.floor((now / 1000 / 60) % 60);
var left_to_hour = 60 * 60 * 1000 - (minutes * 60 + seconds) * 1000;
// add 100 days
var deadline = new Date(now + left_to_hour + 100 * 24 * 60 * 60 * 1000);

initializeClock('clockdiv', deadline);

body {
 text-align: center;
 background: #00ECB9;
  font-family: sans-serif;
  font-weight: 100;
}

h1 {
  color: #396;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
}

#clockdiv{
 font-family: sans-serif;
 color: #fff;
 display: inline-block;
 font-weight: 100;
 text-align: center;
 font-size: 30px;
}

#clockdiv > div {
 padding: 10px;
 border-radius: 3px;
 background: #00BF96;
 display: inline-block;
}

#clockdiv div > span {
 padding: 15px;
 border-radius: 3px;
 background: #00816A;
 display: inline-block;
}

.smalltext {
 padding-top: 5px;
 font-size: 16px;
}

<h1>Countdown Clock</h1>
<div id="clockdiv">
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>

Answer 2

You just need to modify the getTimeRemaining remaining function so it returns the minutes and seconds to the next full hour, e.g.:

/* Return minutes and seconds to next hour
** @returns {Object} minutes: minutes remaining
**                   seconds: seconds remaining
*/
function getTimeRemaining() {
  var t = Date.now();
  var seconds = (60 - Math.floor(t % 6e4 / 1e3)) % 60;
  var minutes = 60 - Math.ceil(t % 3.6e6 / 6e4) + (seconds? 0:1);
  return {
    'minutes': ('0' + minutes).slice(-2),
    'seconds': ('0' + seconds).slice(-2)      };
}

// Simple show remaining function
function showRemaining() {
  var r = getTimeRemaining();
  document.getElementById('clock').textContent = (r.minutes + ':' + ('0' + r.seconds).slice(-2));
  // Run again just after next full second
  setTimeout(showRemaining, 1020 - (Date.now() % 1000));
}

showRemaining();

<span id="clock"></span>