Tutorial HTML CSS JavaScript : Membuat Jam Klasik

Pada artikel tutorial kali ini, kita akan belajar bagaimana membuat Jam Klasik dengan HTML CSS JavaScript, dengan jarum jam menit dan detik yang terus bergerak. Teknik ini menggunakan metode setTimeout pada Javascript

Berikut video step by step di Instagram WebHozz https://www.instagram.com/webhozz/ yang bisa kami ikuti.

View this post on Instagram

A post shared by Kursus Website Android Digital Marketing (@webhozz)

Berikut kode lengkapnya yang bisa kamu coba

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Classic Clock JS</title>

    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #333;
        }

        canvas {
            display: block;
        }
    </style>
</head>

<body>

    <canvas id="canvas"></canvas>

    <script>
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d")

        function resizeCanvas() {
            canvas.width = Math.min(window.innerWidth, window.innerHeight) * 0.8;
            canvas.height = canvas.width;
            drawClock();
        }

        window.addEventListener("resize", resizeCanvas);
        resizeCanvas();

        setInterval(drawClock, 1000);

        function drawClock() {
            const radius = canvas.height / 2;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.save();
            ctx.translate(radius, radius);
            drawFace(ctx, radius);
            drawNumbers(ctx, radius);
            drawTime(ctx, radius);
            ctx.restore();
        }

        function drawFace(ctx, radius) {
            ctx.beginPath();
            ctx.arc(0, 0, radius, 0, 2 * Math.PI);
            ctx.fillStyle = "white";
            ctx.fill();
            ctx.lineWidth = radius * 0.1;
            ctx.strokeStyle = "#333";
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
            ctx.fillStyle = "#333";
            ctx.fill();
        }

        function drawNumbers(ctx, radius) {
            ctx.font = `${radius * 0.15}px Arial`;
            ctx.textBaseline = "middle";
            ctx.textAlign = "center";
            for (let num = 1; num <= 12; num++) {
                const ang = num * Math.PI / 6;
                ctx.rotate(ang);
                ctx.translate(0, -radius * 0.85);
                ctx.rotate(-ang);
                ctx.fillText(num.toString(), 0, 0);
                ctx.rotate(ang);
                ctx.translate(0, radius * 0.85);
                ctx.rotate(-ang);
            }
        }

        function drawTime(ctx, radius) {
            const now = new Date();
            let hour = now.getHours() % 12;
            let minute = now.getMinutes();
            let second = now.getSeconds();

            hour = (hour * Math.PI / 6) + (minute * Math.PI / (6 * 60)) + (second * Math.PI / (360 * 60));
            drawHand(ctx, hour, radius * 0.5, radius * 0.07);

            minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
            drawHand(ctx, minute, radius * 0.8, radius * 0.07);

            second = (second * Math.PI / 30);
            drawHand(ctx, second, radius * 0.9, radius * 0.02);

        }

        function drawHand(ctx, pos, length, width) {
            ctx.beginPath();
            ctx.lineWidth = width;
            ctx.linecap = "round";
            ctx.moveTo(0, 0);
            ctx.rotate(pos);
            ctx.lineTo(0, -length);
            ctx.stroke();
            ctx.rotate(-pos);
        }


    </script>

</body>

</html>

Selamat mencoba