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.

Simple DOM Examples

  1. JS: Change CSS
  2. JS: Change Element's Content
  3. JS: Create HTML Element
  4. JS: Remove HTML Element

  1. JS: document.write
  2. JS: Image Rollover
  3. JS: Pop-up New Window
  4. JS: Digital Clock
  5. JS: Stopwatch
  6. JS: Fade a Element
  7. JS: Fade a Element Using CSS Transition
  8. JavaScript UI: Shake Element
  9. JS: How to Create Tooltip
  10. JS: Falling Snow Effect
  11. JavaScript Floating Box Following Scroll
Like what you read? Buy JavaScript in Depth