Title photo
frugal technology, simple living and guerrilla large-appliance repair
Tue, 09 May 2017

Javascript digital clock

Since this blog's time is displayed in UTC, I wanted to put a digital clock on the site that told the current Universal Time so a casual reader (like me) could have some idea of how long ago (or what time of "day") a given post was published.

I started with some JavaScript code from Cory/uniqname on CodePen and simplified it greatly and because I wanted more output rather than less, counterintuitively as well.

It uses the Date() object and the toUTCString() method to create the text for display of the time/day/date/year and setInterval to "update" the text every second:

function clock() {
  var local_time = new Date(),
  utc_time = local_time.toUTCString();

document.querySelectorAll('.clock')[0].innerHTML = utc_time;

  setInterval(clock, 1000);

I stashed this bit of code in a file called clock.js, and called it into the site with script tags and a div:

<script type="text/javascript" src="/path/to/clock.js">
<div class="clock"></div>

(Note that /path/to/clock.js means the actual path on the server to where you happen to have created the JavaScript file.)

The toUTCString() method outputs the time in 24-hour format. If I want it it in 12-hour format (with AM/PM), the script would have to get a lot more complicated. I'm not saying I won't do that, but for now the easy wins over the perfect.