JavaScript Clock Examples | JavaScript Tutorial

Introduction to JavaScript Clocks

Clocks are excellent examples to demonstrate JavaScript's capabilities with time, animations, and DOM manipulation. JavaScript provides the Date object to work with dates and times, which we can use to create various types of clocks.

Key concepts in creating JavaScript clocks:

Using the Date object to get current time
Manipulating time values (hours, minutes, seconds)
Using setInterval for real-time updates
CSS animations for visual effects
Canvas API for drawing analog clocks

Below are three different implementations of JavaScript clocks, each demonstrating unique approaches to displaying time.

Example 1: Original Image-based Clock

This clock implementation is courtesy of Gordon McComb. It originally used digit images to display the time. We've updated it to work without images while preserving the original approach.

// Original Clock Implementation (Gordon McComb)
var time = new Date().getTime();
$(document.body).bind("mousemove keypress", function(e) {
    time = new Date().getTime();
});

function refresh() {
    if(new Date().getTime() - time >= 60000) 
        window.location.reload(true);
    else 
        setTimeout(refresh, 10000);
}

setTimeout(refresh, 10000);

var Temp;
setClock();

function setClock() {
    Temp = "";
    now = new Date();
    var CurHour = now.getHours();
    var CurMinute = now.getMinutes();
    now = null;
    if (CurHour >= 12) {
        CurHour = CurHour - 12;
        Ampm = "pm";
    } else
        Ampm = "am";
    if (CurHour == 0)
        CurHour = "12"
    if (CurMinute < 10) 
        CurMinute = "0" + CurMinute
    else
        CurMinute = "" + CurMinute

    CurHour = "" + CurHour;    
    Temp = CurHour + ":" + CurMinute + " " + Ampm;
}

Image-based Clock Live Demo

Example 2: Analog Clock

An analog clock implementation using Canvas API. This example demonstrates how to draw clock hands and animate them in real-time.

// Analog Clock Implementation
function drawAnalogClock() {
    const canvas = document.getElementById('analogClock');
    const ctx = canvas.getContext('2d');
    const radius = canvas.width / 2;
    
    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Draw clock face
    ctx.beginPath();
    ctx.arc(radius, radius, radius - 10, 0, 2 * Math.PI);
    ctx.fillStyle = '#fff';
    ctx.fill();
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 8;
    ctx.stroke();
    
    // Draw numbers
    ctx.font = radius * 0.15 + "px Arial";
    ctx.textBaseline = "middle";
    ctx.textAlign = "center";
    for (let i = 1; i <= 12; i++) {
        const angle = i * Math.PI / 6;
        ctx.fillText(i.toString(), 
            radius + Math.sin(angle) * (radius * 0.75), 
            radius - Math.cos(angle) * (radius * 0.75));
    }
    
    // Get current time
    const now = new Date();
    const hour = now.getHours() % 12;
    const minute = now.getMinutes();
    const second = now.getSeconds();
    
    // Draw hour hand
    drawHand(ctx, radius, 
        (hour * 30) + (minute * 0.5), 
        radius * 0.5, radius * 0.07);
    
    // Draw minute hand
    drawHand(ctx, radius, 
        (minute * 6), 
        radius * 0.75, radius * 0.05);
    
    // Draw second hand
    drawHand(ctx, radius, 
        (second * 6), 
        radius * 0.85, radius * 0.02, '#f44336');
}

function drawHand(ctx, radius, angle, length, width, color = '#333') {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = 'round';
    ctx.strokeStyle = color;
    ctx.moveTo(radius, radius);
    ctx.lineTo(
        radius + Math.sin(angle * Math.PI / 180) * length,
        radius - Math.cos(angle * Math.PI / 180) * length
    );
    ctx.stroke();
}

// Update clock every second
setInterval(drawAnalogClock, 1000);
drawAnalogClock();

Analog Clock Live Demo

Example 3: Digital Clock

A modern digital clock with date display. This example shows how to create a sleek digital clock with CSS styling.

// Digital Clock Implementation
function updateDigitalClock() {
    const now = new Date();
    
    // Format time
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const seconds = now.getSeconds().toString().padStart(2, '0');
    
    // Format date
    const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    const dateStr = now.toLocaleDateString('en-US', options);
    
    // Update DOM
    document.getElementById('digitalTime').textContent = `${hours}:${minutes}:${seconds}`;
    document.getElementById('digitalDate').textContent = dateStr;
}

// Update clock every second
setInterval(updateDigitalClock, 1000);
updateDigitalClock();

Digital Clock Live Demo

00:00:00

More Examples

Explore more JavaScript examples to enhance your learning experience:

Counter Timer

Create a countdown timer with JavaScript

View Example

Digital Dice

Interactive dice with animation effects

View Example

Future Value

Financial calculator with JavaScript

View Example

Slide Show

Image slideshow with transition effects

View Example