HTML5 Digital clock Animation example

Write code here

J | B | A

<!DOCTYPE html>
<html>
<head>
    <title>
        Digital clock
    </title>
    <link href="StyleSheet5.css" rel="stylesheet" />
</head>
<body>
 <style>
        h1 {
            font-size: 30px;
            text-align: center;
        }

#clock {
            display: block;
            margin: 0 auto;
            background: red;
            border: 5px solid black;
        }
    </style>
    <div>
        <h1 style="color:blue"><i>Digital Clock using canvas HTML5</i></h1>
        <canvas id="clock" width="500" height="200"></canvas>
    </div>
    <script>
    var context;
    var d;
    var str;
    function getClock()
    {
    
    d = new Date();
    str = Calculate(d.getHours(), d.getMinutes(), d.getSeconds());
    
    context = clock.getContext("2d");
    context.clearRect(0, 20, 500, 200);
    context.font = "40pt calibri";
    context.fillStyle = "white";
    context.fillText(str, 102, 125);
    }

function Calculate(hour, min, sec)
    {
    var curTime;
    if(hour < 10)
    curTime = "0"+hour.toString();
    else
    curTime = hour.toString();

if(min < 10)
    curTime += ":0"+min.toString();
    else
    curTime += ":"+min.toString();

if(sec < 10)
    curTime += ":0"+sec.toString();
    else
    curTime += ":"+sec.toString();
    return curTime;
    }

setInterval(getClock, 1000);
    </script>
</body>
</html>

Note: We DO NOT save your trial code in our database.

HTML5 > Digital Clock Animation

Write code here

Output