How to add the current time using JavaScript

Note: skip all the way down to the bottom to grab the completed code. You can view the running code from a codepen embed at the botom of this post. Or read through this short article to find out how it’s done.

Here are some ways to add the current time onto a web page using JavaScript

The first way is simple, but comes with caveats, so is not ideal. The last code is the best solution.

For the first way, the hours, minutes and seconds are grabbed from a new date object, but there are two problems: a) JS is added within the HTML – not good practice. And B) the format can appear without double figures ie: 12:4:2pm.

<h4>Get current time</h4>
<p>
The current time is:
<script>
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();

  document.write(hours + ":" + minutes + ":" + seconds);
</script>
</p>

The second way is to add just the hours, but put am or pm after the number. In this example, there are some conditional statements and also ‘modulo %’, which calculates based on the 12 hour clock:

<h4>Change hours to a.m and p.m</h4>
<p>The current time is:
  <script>
    var now = new Date();
    var hour= now.getHours();
    if (hour < 12) {
      meridiem = 'am';
    }
    else {
      meridiem = 'pm';
    }
    hour = hour % 12;
    if (hour==0) {
      hour = 12;
    }
    hour = hour + ' ' + meridiem;
    
    document.write(hours);
    </script>

Add a zero to minutes that are less than 10.

<script>
  var minutes = now.getMinutes();
  if (minutes<10) {
    minutes = '0' + minutes;
  }
</script>

The code above getsthe minutes. Checks if it is less than ten. If it is, it adds a zero as a string to minutes. If a string concatenates with a number in JavaScript, then JS autonatically converts the number to a string. In this instance, ‘string’ number becomes ‘string’.

This is all well and good but the JS needs to move out of the HTML. The code needs to be repackaged into a function that can be called.

Here is the function to add the current time to HTML, currently formatted:

function printTime(secs) {
  var sep = ':'; // separator character
  var hours, minutes, seconds, time;
  var now = new Date();
  hours = now.getHours();
  if (hours < 12) {
    meridiem = 'am';
  } else {
    meridiem = 'pm';
  }
  hours = hours % 12;
  if (hours==0) {
    hours = 12;
  }
  time = hours;
  minutes = now.getMinutes();
  if (minutes < 10) {
    minutes = '0' + minutes;
  }
  time += sep + minutes;
  if (secs) {
    seconds = now.getSeconds();
    if (seconds < 10) {
      seconds = '0' + seconds;
    }
    time += sep + seconds;
  }
  return time + ' ' + meridiem;
}

This code needs to run first. Then, add a call to the function in the HTML:

<h4>A function to print the time</h4>
The current time is: 
<script>document.write(printTime());</script>

If you want to add the seconds include true as a parameter inside the function call:

<h4>A function to print the time</h4>
The current time is: 
<script>document.write(printTime(true));</script>

So to recap: Make sure the function is read first, then the HTML and the function call.

Note: This code is not to the current ECMA JavaScript standard but will still work. I’ve grabbed it from an old book as I needed it for a project. At some point I’ll re-write it, but for now, I hope it helps.

See the Pen Get current time using JavaScript by Dan Johnson (@danjohnsonwhitstable) on CodePen.

This entry was posted in Code Grab by Dan. Bookmark the permalink.

About Dan

Freelance web and graphic designer currently residing in a small town in Kent, UK, called Whitstable, famous for oysters. It's got a great beach.