Scribd Logo
Upload

Welcome to Scribd!

  • 386 views

    Analog Clock

    Uploaded by

    mkapkr
    The document describes code for creating an analog clock using HTML, CSS, and JavaScript. It defines styles for the clock container and canvas. JavaScript code initializes the clock, clears the canvas, and draws the background clock face with numbers. It then calls functions to draw the hour, minute, and second hands on the clock using calculated progress values and drawing each arm to the appropriate point around the center of the clock face. The clock is updated every second by calling these drawing functions to advance the hands.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd

    Analog Clock

    Uploaded by

    mkapkr
    386 views3 pages
    The document describes code for creating an analog clock using HTML, CSS, and JavaScript. It defines styles for the clock container and canvas. JavaScript code initializes the clock, clears the canvas, and draws the background clock face with numbers. It then calls functions to draw the hour, minute, and second hands on the clock using calculated progress values and drawing each arm to the appropriate point around the center of the clock face. The clock is updated every second by calling these drawing functions to advance the hands.

    Original Description:

    Analog Clock

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document describes code for creating an analog clock using HTML, CSS, and JavaScript. It defines styles for the clock container and canvas. JavaScript code initializes the clock, clears the canvas, and draws the background clock face with numbers. It then calls functions to draw the hour, minute, and second hands on the clock using calculated progress values and drawing each arm to the appropriate point around the center of the clock face. The clock is updated every second by calling these drawing functions to advance the hands.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    386 views3 pages

    Analog Clock

    Uploaded by

    mkapkr
    The document describes code for creating an analog clock using HTML, CSS, and JavaScript. It defines styles for the clock container and canvas. JavaScript code initializes the clock, clears the canvas, and draws the background clock face with numbers. It then calls functions to draw the hour, minute, and second hands on the clock using calculated progress values and drawing each arm to the appropriate point around the center of the clock face. The clock is updated every second by calling these drawing functions to advance the hands.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    of 3

    <!

    DOCTYPE html>
    <html>

    <head>
    <title>Analog Clock</title>

    <style>
    #current-time {
    display: block;
    font-weight: bold;
    text-align: center;
    width: 200px;
    padding: 10px;
    }
    #clock {
    padding: 10px;
    border:1px solid #000000;
    }
    </style>
    </head>

    <body>
    <canvas id="clock" width="200" height="200">
    If you can see this message, your browser does not support canvas
    and needs an upate. Sorry. :(
    </canvas>


    <script>
    document.addEventListener('DOMContentLoaded', startTimer);
    function startTimer()
    {
    setInterval(updateClocks, 1000);
    }
    function updateClocks()
    {
    var now = new Date();
    var h = now.getHours() % 12;
    var m = now.getMinutes();
    var s = now.getSeconds();
    // --- Analog clock ---//
    var canvas = document.getElementById("clock");
    var context = canvas.getContext("2d");
    // You can change this to make the clock as big or small as you want.
    // Just remember to adjust the canvas size if necessary.
    var clockRadius = 100;
    // Make sure the clock is centered in the canvas
    var clockX = canvas.width / 2;
    var clockY = canvas.height / 2;
    // Make sure TAU is defined (it's not by default)
    Math.TAU = 2 * Math.PI;
    context.clearRect(0, 0, canvas.width, canvas.height);
    // Draw background
    for (var i = 0; i < 12; i++)
    {
    var innerDist = (i % 3) ? 0.75 : 0.7;
    var outerDist = (i % 3) ? 0.95 : 1.0;
    context.lineWidth = (i % 3) ? 4 : 10;
    context.strokeStyle = '#999999';
    var armRadians = (Math.TAU * (i/12)) - (Math.TAU/4);
    var x1 = clockX + Math.cos(armRadians) * (innerDist * clockRadiu
    s);
    var y1 = clockY + Math.sin(armRadians) * (innerDist * clockRadiu
    s);
    var x2 = clockX + Math.cos(armRadians) * (outerDist * clockRadiu
    s);
    var y2 = clockY + Math.sin(armRadians) * (outerDist * clockRadiu
    s);
    context.beginPath();
    context.moveTo(x1, y1); // Start at the center
    context.lineTo(x2, y2); // Draw a line outwards
    context.stroke();
    }
    // Draw arms
    function drawArm(progress, armThickness, armLength, armColor)
    {
    var armRadians = (Math.TAU * progress) - (Math.TAU/4);
    var targetX = clockX + Math.cos(armRadians) * (armLength * clock
    Radius);
    var targetY = clockY + Math.sin(armRadians) * (armLength * clock
    Radius);
    context.lineWidth = armThickness;
    context.strokeStyle = armColor;
    context.beginPath();
    context.moveTo(clockX, clockY); // Start at the center
    context.lineTo(targetX, targetY); // Draw a line outwards
    context.stroke();
    }
    var hProgress = (h/12) + (1/12)*(m/60) + (1/12)*(1/60)*(s/60);
    var mProgress = (m/60) + (1/60)*(s/60);
    var sProgress = (s/60);
    drawArm( hProgress, 10, 1/2, '#000000'); // Hour
    drawArm( hProgress, 10, -5/clockRadius, '#000000'); // Hour
    drawArm( mProgress, 4, 3/4, '#000000'); // Minute
    drawArm( mProgress, 4, -2/clockRadius, '#000000'); // Minute
    drawArm( sProgress, 2, 1, '#FF0000'); // Second
    drawArm( sProgress, 2, -10/clockRadius, '#FF0000'); // Second
    }
    </script>
    </body>
    </html>

    You might also like