0

I'm currently working on a project in JavaScript that tell the user the amount of time left in a class period based on the users time. I am able to determine the time using the following code.

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}

My goal is to subtract the current time based on the user by the amount of time left in the period. Here are the period times I want to use.

Period 1 7:45 - 8:34

Period 2 8:38 - 9:30

Period 3 9:34 - 10:23

Period 4 10:27 - 11:16

Period 5 11:20 - 12:38

Period 6 12:42 - 1:31

Period 7 1:35 - 2:25

So if its 8:30 it will return to the user "There is 4 minute(s) left in period 1" In this scenario the number 4 will be represented by a variable and same applies for "1" based on the period.

1
  • moment.js ... that is all
    – ste-fu
    Commented Dec 19, 2016 at 16:07

2 Answers 2

2

http://momentjs.com/

This library has a really useful API and makes dealing with Dates and times in JavaScript reasonable. See "relative time"

See below example taken from this:

Countdown timer using Moment js

You obviously won't want the minutes and seconds, eventTime being a datestamp for the end of each "period"

<script>
  $(document).ready(function(){

    var eventTime = '1366549200';
    var currentTime = '1366547400';
    var leftTime = eventTime - currentTime;//Now i am passing the left time from controller itself which handles timezone stuff (UTC), just to simply question i used harcoded values.
    var duration = moment.duration(leftTime, 'seconds');
    var interval = 1000;

    setInterval(function(){
      // Time Out check
      if (duration.asSeconds() <= 0) {
        clearInterval(intervalId);
        window.location.reload(true); #skip the cache and reload the page from the server
      }

      //Otherwise
      duration = moment.duration(duration.asSeconds() - 1, 'seconds');
      $('.countdown').text(duration.days() + 'd:' + duration.hours()+ 'h:' + duration.minutes()+ 'm:' + duration.seconds() + 's');
    }, interval);
  });
  </script>

1

This is easy if you understand UTC conversion. You can find both the duration and time remaining fairly easily.

Also, make sure your time includes AM/PM or you add 12 hours to the PM times. Without doing this, your code will be a nightmare. It will also make your logic unstable and unpredictable.

var periods = [
  [ '07:45' , '08:34' ],
  [ '08:38' , '09:30' ],
  [ '09:34' , '10:23' ],
  [ '10:27' , '11:16' ],
  [ '11:20' , '12:38' ],
  [ '12:42' , '13:31' ],
  [ '13:35' , '14:25' ]
];

generatePeriods();
updateTimePeriods();
setTimeout(updateTimePeriods, 1000); // Update every second

function generatePeriods() {
  var listEl = document.getElementById('periods');
  periods.forEach(function(period) {
    listEl.appendChild(document.createElement('LI'));
  });
}
function updateTimePeriods() {
  var now = new Date();
  var children = document.getElementById('periods').childNodes;
  var i = 0;
  
  for (var i = 0; i < children.length; i++) {
    var child = children[i];
    var start = periods[i][0];
    var end = periods[i][1];
    child.innerHTML = [
      start, ' — ', end,
      ' => Duration: ', formatUTCTime(duration(start, end)),
      ', Remaining: ', formatTimeRemaining(timeLeft(now, end)),
      ', In Progress: ', isInProgress(now, start, end)
    ].join('');
  }
}
function isInProgress(now, start, end) {
  var nowTime = parseTime(formatTime(now));
  var startTime = parseTime(start);
  var endTime = parseTime(end);
  return nowTime.getTime() >= startTime.getTime()
      && nowTime.getTime() < endTime.getTime()
}
function duration(start, end) {
  var startTime = parseTime(start);
  var endTime = parseTime(end);
  return endTime.getTime() - startTime.getTime();
}
function timeLeft(now, end) {
  var nowTime = parseTime(formatTime(now));
  var endTime = parseTime(end);
  return endTime.getTime() - nowTime.getTime();
}
function parseTime(timeStr) {
  var tokens = timeStr.split(':');
  return new Date(1970, 0, 1, parseInt(tokens[0], 10), parseInt(tokens[1], 10));
}
function formatUTCTime(time) {
  var date = new Date(time);
  return padZero(date.getUTCHours()) + ':' + padZero(date.getUTCMinutes());
}
function formatTime(time) {
  var date = new Date(time);
  return padZero(date.getHours()) + ':' + padZero(date.getMinutes());
}
function formatTimeRemaining(time) {
  var sign = '+';
  if (time < 0) { time *= -1; sign = '–'; }
  var date = new Date(time);
  return sign + padZero(date.getUTCHours()) + ':' + padZero(date.getUTCMinutes())  + ':' + padZero(date.getUTCSeconds());
}
function padZero(n) { return ('00' + n).substr(-2); }
<h1>Periods</h1>
<ol id="periods"></ol>

2
  • How would you only display the current periods time?
    – Zachmalter
    Commented Dec 19, 2016 at 18:15
  • @zmalter99 I added an isInProgress() check to see if the current time exists between the two times. You can filter on those. Commented Dec 19, 2016 at 18:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.