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:

JavaScript to implement a simple clock
js to achieve a very simple clock effect
JavaScript draws a simple clock effect
Simple clock effect example implemented by JS+CSS3
Simple clock function example implemented by native JS
Use css + native js to make a simple clock
Detailed explanation of JavaScript's Date object (making a simple clock)
JavaScript clock example

<<: Detailed explanation of MySQL 8.0.18 commands

>>: Detailed tutorial on installing the jenkins container in a docker environment

Eight ways to implement communication in Vue

Native JS to implement real-time clock

Eight ways to implement communication in Vue

N ways to achieve two-column layout with CSS

JavaScript to achieve time range effect

How to locate MySQL slow queries

Detailed explanation of Docker container cross-host multi-network segment communication solution

Detailed explanation of server and location configuration of simple forwarding request of nginx

Tutorial on installing lamp-php7.0 in Centos7.4 environment

How to use Docker-compose to build an ELK cluster

Detailed tutorial on installing different (two) versions of MySQL database on Windows

JavaScript implements color identification when the mouse passes over the table row

Recommend

Solution to no Chinese input method in Ubuntu

Analysis of the principle of using PDO to prevent SQL injection

How to restore data using binlog in mysql5.7

How to use Linux whatis command

View the port number occupied by the process in Linux

10 excellent Web UI libraries/frameworks

Flex layout makes adaptive pages (syntax and examples)

Record a slow query event caused by a misjudgment of the online MySQL optimizer

Windows Server 2019 IIS10.0+PHP(FastCGI)+MySQL Environment Construction Tutorial

Detailed explanation of MySQL foreign key constraints

Vue-router example code for dynamically generating navigation menus based on backend permissions

Steps for Django to connect to local MySQL database (pycharm)

CentOS 6.5 installation mysql5.7 tutorial

Pure CSS to adjust Div height according to adaptive width (percentage)

HTML+CSS+JavaScript to make a girlfriend version of scratch card (you will learn it once you see it)