JS: Digital Clock

By Xah Lee. Date: . Last updated: .

This page is a JavaScript example that prints the current time.

Current time is:

Here's HTML code:

<p>Current time is: <span id="id39018"> </span></p>

<script defer src="gettime.js"></script>

Here's the JavaScript file gettime.js's content:

var displayArea = document.getElementById("id39018");

// conver number num to string, pad 0 in front to make it 2 digits
function format(num) {
    var numStr = num.toString();
    if (numStr.length === 1) {
        return "0" + numStr;
    } else {
        return numStr;
    }
}

function updateDisplay() {
    var dd = new Date();
    var hh = dd.getHours();
    var mm = dd.getMinutes();
    var ss = dd.getSeconds();
    displayArea.textContent = format(hh) + ":" + format(mm) + ":" + format(ss);
}

setInterval(updateDisplay, 1000);

Analog Clock

See: JS: SVG Clock.

JavaScript Fancy UI Examples

  1. JS: Image Rollover
  2. JS: Pop-up New Window
  3. JS: Digital Clock
  4. JS: Stopwatch
  5. JS: Fade a Element
  6. JS: Fade a Element Using CSS Transition
  7. JavaScript UI: Shake Element
  8. JS: How to Create Tooltip
  9. JS: Falling Snow Effect
  10. JavaScript Floating Box Following Scroll
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Patreon me $5. Ask me question on patreon