Date and time incrementation, using a fictional calendar / clock I created a simple clock &amp; calendar system using a fictional system: everything from the number of seconds in a minute, down to the number of months in a year could be different from our accepted norms (i.e. the Gregorian Calendar). (For the purposes of testing the system I have declared that there are 2 seconds in a minute and the calendar uses Elder Scrolls naming for months and days of the week.)

Eventually I'd like to incorporate this into a game, so the function setInterval that currently increments the seconds is a simple stand-in for a more sophisticated kind of game loop.

The full code (with visual output) can be found at this JSFiddle.

I'm particularly interested in feedback on this method, which handles the incrementation of time:

function incrementOneSecond() {
  secondIndex++;
  currentSecond = secondIndex;
  if (secondIndex &gt; secondsPerMinute) {
    secondIndex = 0;
    minuteIndex++;
    currentMinute = twoDigitFormat(minuteIndex);
    if(minuteIndex &gt; minutesPerHour) {
        minuteIndex = 0;
      hourIndex++;
      currentHour = twoDigitFormat(hourIndex);
      if (hourIndex &gt; hoursPerDay) {
        hourIndex = 0;
        dayIndex++;
            currentDay = weekdays[dayIndex];
        if (dayIndex &gt;= weekdays.length) {
            dayIndex = 0;
          dateNumberIndex++;
          currentDateNumber = dateNumberIndex;
          if (dateNumberIndex &gt; monthMaxDays) {
                    dateNumberIndex = 1;
            monthIndex++;
            currentMonth = months[monthIndex];
            if (monthIndex &gt;= months.length) {
                        monthIndex = 0;
              yearIndex++;
              currentYear = yearIndex;
            }
            }
        }
      }
    }
  }

  updateTime(currentMinute, currentHour, currentDay, currentMonth, currentDateNumber, currentYear);
}


There's a lot of repetition, so it feels like I should be able to DRY it up, but because each if statement differs slightly, I haven't been able to come up with a way of rewriting the method in a way that is more efficient but also still readable.

Other methods used:

function twoDigitFormat(input) {
    formatted = ("0" + input).slice(-2)
    return formatted;
}

function updateTime(currentMinute, currentHour, currentDay, currentMonth, currentDateNumber, currentYear) {
    timeDisplay.innerHTML = currentHour + ':' + currentMinute;
    dateDisplay.innerHTML = currentDay + '&lt;br/&gt;' + currentMonth + ' ' + currentDateNumber + ', ' + currentYear;
}
Feedback

The code seems to work okay, though it appears that the counting is off because of the comparison operators used (i.e. &gt;) and the initial value of the indexes (e.g. secondIndex = 0). Use Greater than Or equal to (i.e. &gt;=) in order to accurately count with the correct number of seconds per minute, minutes per hour, etc.

Your code doesn't display the value of currentSecond but I added it (see code snippet below) and noticed it was going between values of 1, 2 and 3.

Suggestions

Pre-increment instead of post-increment and use immediately after

Instead of incrementing each value using the post-increment operator and then using it, use the pre-increment operator.

So lines like this:

secondIndex++;
currentSecond = secondIndex;


Can be converted to a single line like this:

currentSecond = ++secondIndex;


Parameter passing

function incrementOneSecond() references all variables defined with scope outside of it (e.g. currentSecond, currentMinute, etc.), so why pass those to updateTime()? For consistency, either pass them all to incrementOneSecond() when calling it, or just reference them the same way within updateTime().



var dateDisplay = document.getElementById('dateDisplay');
var btnNext = document.getElementById('next');

var weekdays = [
  'Morndas',
  'Tirdas',
  'Middas',
  'Turdas',
  'Fredas',
  'Loredas',
  'Sundas'
];
var months = [
  'Morning Star',
  'Sun\'s Dawn',
  'First Seed',
  'Rain\'s Hand',
  'Second Seed',
  'Midyear',
  'Sun\'s Height',
  'Last Seed',
  'Hearthfire',
  'Frostfall',
  'Sun\'s Dusk',
  'Evening Star'
];
var monthMaxDays = 30;
var yearStart = 1888;
var secondsPerMinute = 2;
var minutesPerHour = 30;
var hoursPerDay = 24;

var currentSecond = currentSecond || 0;
var currentMinute = currentMinute || twoDigitFormat(0);
var currentHour = currentHour || twoDigitFormat(0);
var currentDay = currentDay || weekdays[0];
var currentDateNumber = currentDateNumber || 1;
var currentMonth = currentMonth || months[0];
var currentYear = currentYear || yearStart;

var secondIndex = currentSecond;
var minuteIndex = currentMinute;
var hourIndex = currentHour;
var dayIndex = parseInt(weekdays.indexOf(currentDay), 10);
var dateNumberIndex = currentDateNumber;
var monthIndex = parseInt(months.indexOf(currentMonth), 10);
var yearIndex = currentYear;

var secondLoop = setInterval(incrementOneSecond, 500);

function twoDigitFormat(input) {
  return ("0" + input).slice(-2)
}


function incrementOneSecond() {
  currentSecond = ++secondIndex;
  if (secondIndex &gt;= secondsPerMinute) {
    secondIndex = 0;
    currentMinute = twoDigitFormat(++minuteIndex);
    if (minuteIndex &gt;= minutesPerHour) {
      minuteIndex = 0;
      currentHour = twoDigitFormat(++hourIndex);
      if (hourIndex &gt;= hoursPerDay) {
        hourIndex = 0;
        currentDay = weekdays[++dayIndex];
        if (dayIndex &gt;= weekdays.length) {
          dayIndex = 0;
          currentDateNumber = ++dateNumberIndex;
          if (dateNumberIndex &gt; monthMaxDays) {
            dateNumberIndex = 1;
            currentMonth = months[++monthIndex];
            if (monthIndex &gt;= months.length) {
              monthIndex = 0;
              currentYear = ++yearIndex;
            }
          }
        }
      }
    }
  }

  updateTime();
}

function updateTime() {
  timeDisplay.innerHTML = currentHour + ':' + currentMinute + ':' + currentSecond;
  dateDisplay.innerHTML = currentDay + '&lt;br/&gt;' + currentMonth + ' ' + currentDateNumber + ', ' + currentYear;
}
html,
body {
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1.2rem;
}
&lt;span id='timeDisplay'&gt;&lt;/span&gt;
&lt;br/&gt;
&lt;span id='dateDisplay'&gt;&lt;/span&gt;