Native JS to implement real-time clock

Share a real-time clock effect implemented with native JS. The effect is as follows (PS: the actual pointer moves 360 degrees, only a part of it was captured when taking a screenshot)

The above effect requires a total of 4 pictures, namely the dial, hour hand, minute hand, and second hand. You can make your own pictures as needed. The implementation code is as follows:

<!DOCTYPE html>
<html>
 
<head lang="en">
    <meta charset="UTF-8">
    <title>Native JS to implement real-time clock</title>
    <style>
        .clock {
            width: 600px;
            height: 600px;
            margin: 100px auto;
            /*Dial background*/
            background: url(images/0.jpg) no-repeat;
            position: relative;
        }
 
        .clock div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Hour hand image */
            background: url(images/1.png) no-repeat center center;
        }
 
        #m {
            /* Minute hand image*/
            background-image: url(images/2.png);
        }
 
        #s {
            /* Second hand picture*/
            background-image: url(images/3.png);
        }
    </style>
</head>
 
<body>
    <div class="clock">
        <div id="h"></div>
        <div id="m"></div>
        <div id="s"></div>
    </div>
 
    <script>
        // Get element var h = document.getElementById("h"); // hours var m = document.getElementById("m"); // minutes var s = document.getElementById("s"); // seconds var timer = null;
 
        // Modify the rotation angle of each box in real time according to the current time timer = setInterval(function () {
            var date = new Date();
 
            // Calculate the angle of the box movement based on each time part of the current date // 360/12 30 degrees/hour h.style.transform = "rotate(" + date.getHours() * 30 + "deg)";
 
            // 360/60 per minute 6 degrees/minute m.style.transform = "rotate(" + date.getMinutes() * 6 + "deg)";
 
            // 360/60 per second 6 degrees/second s.style.transform = "rotate(" + date.getSeconds() * 6 + "deg)";
 
        }, 1000);
    </script>
</body>
 
</html>

For more JavaScript clock effects, click here: JavaScript clock effects special topic

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: