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

Nginx's practical method for solving cross-domain problems

Detailed graphic tutorial on downloading and installing VirtualBox software and installing and deploying it in Linux environment

1. Download and install VirtualBox software First...

Solve the error of starting MongoDB: error while loading shared libraries: libstdc++.so.6:cannot open shared object file:

When starting MongoDB, the prompt is: error while...

Native JS to implement real-time clock

Nginx's practical method for solving cross-domain problems

Getting Started Tutorial for Beginners ④: How to bind subdirectories

Float and Clear Float in Overview Page

Linux uses lsof/extundelete tools to restore accidentally deleted files or directories

Commands to find domain IP address in Linux terminal (five methods)

Analysis of the use of the MySQL database show processlist command

Docker container data volume named mount and anonymous mount issues

Detailed explanation of importing/exporting MySQL data in Docker container

Vue uses ECharts to implement line charts and pie charts

Building a selenium distributed environment based on docker

Recommend

Detailed explanation of the reasons and solutions for floating elements to collapse the height of their parent elements

Detailed explanation of MySQL/Java server support for emoji and problem solving

MySQL 5.6 installation steps with pictures and text

Detailed graphic tutorial on downloading and installing VirtualBox software and installing and deploying it in Linux environment

Building command line applications with JavaScript

How to configure the Runner container in Docker

Analysis of the use of the MySQL database show processlist command

Mysql 5.6 adds a method to modify username and password

Essential skills for designing web front-end interfaces

mysql5.7.19 zip detailed installation process and configuration

Solve the error of starting MongoDB: error while loading shared libraries: libstdc++.so.6:cannot open shared object file:

Detailed explanation of the differences and applications of {{}}, v-text and v-html in Vue

Detailed explanation of application scenarios of filters in Vue

In-depth understanding of the role of Vuex

9 Practical Tips for Creating Web Content Pages