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

The National Day is coming. Use JS to implement a small tool to generate a National Day style avatar. Detailed explanation of the implementation process

Blog

Linux command line quick tips: How to locate a file

Native JS to implement real-time clock

SASS Style Programming Guide for CSS

Linux super detailed gcc upgrade process

Essential for front-end development: 12 browser compatibility testing tools recommended

Detailed explanation of Angular structural directive modules and styles

Use Meta to cancel the traffic cache to refresh the page every time you visit it for easy debugging

Example of adding and deleting range partitions in MySQL 5.5

The National Day is coming. Use JS to implement a small tool to generate a National Day style avatar. Detailed explanation of the implementation process

Linux command line quick tips: How to locate a file

Detailed explanation of using Alibaba Cloud image repository to build foreign Docker images

JavaScript canvas realizes dynamic point and line effect

Recommend

Install Docker on CentOS 7

Detailed explanation of how to configure openGauss database in docker

How to use nginx to simulate canary release

Nginx Location directive URI matching rules detailed summary

Detailed explanation of HTML tables

Detailed explanation of how Nginx works

The simplest solution to the problem that Sublime Text cannot input Chinese in Ubuntu

HTML embed tag usage and attributes detailed explanation

How to encapsulate timer components in Vue3

Practical notes on installing Jenkins with docker-compose

js simple and crude publish and subscribe sample code

js simulation to achieve the effect of enlarging the picture on the Jingdong details page

Detailed analysis of the MySQL slow log opening method and storage format

Some common mistakes with MySQL null

CSS removes the dotted border generated when clicking a link. Compatible with browsers that meet W3C standards