JS: Digital Clock

By Xah Lee. Date: . Last updated: .

here's JavaScript example that prints the current time.

Current time is:

Here's the code:

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

<script defer src="gettime.js"></script>
const displayArea = document .getElementById("id39018");

// conver number num to string, pad 0 in front to make it 2 digits
const format = ((num) => {
    const numStr = num.toString();
    return ( (numStr.length === 1) ? "0" + numStr : numStr )
});

const updateDisplay = (() => {
    const dd = new Date();
    const hh = dd.getHours();
    const mm = dd.getMinutes();
    const 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

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog