JavaScript to implement a simple clock

JavaScript to implement a simple clock

This article example shares the specific code for implementing a simple clock in JavaScript for your reference. The specific content is as follows

Effect picture:

Main ideas:

1. Draw a circular dial first.

2. Then use js to draw the scale in a loop (each scale is a li tag).
3. Draw the hour, minute and second hands again.

4. Then use JS to make the pointer move.

There are detailed comments in the code and you can read the code directly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style id="style">
        ul{
            list-style: none;
        }
        #circle{
            width: 200px;
            height: 200px;
            border-radius: 100px;
            border: 1px solid black;
        }
        #kedu li{
            width: 1px;
            height: 6px;
            border-radius: 10px;
            background-color: black;
            transform-origin: center 101px;/*Set the rotation center and rotation radius of the li tag. */
            position: absolute;
            left: 109px;
            top: 9px;
        }
        #kedu li:nth-of-type(5n+1){
            height: 12px;
            width: 2px;
        }

        /* Draw the second hand. Use transform to draw the div into a line. The following pointers are drawn like this. */
        #second{
            width: 2px;
            height: 80px;
            background-color: red;
            transform: scaleY(1);
            position: absolute;
            left: 108px;
            top: 30px;
            transform-origin: bottom; /*Set their rotation center, transform-origin: bottom; means to rotate around their bottom. */
        }
        #min{
            width: 2px;
            height: 65px;
            background-color: gray;
            transform: scaleY(1);
            position: absolute;
            left: 108px;
            top: 45px;
            transform-origin: bottom;
        }
        #hour{
            width: 2px;
            height: 50px;
            background-color: black;
            transform: scaleY(1);
            position: absolute;
            left: 108px;
            top: 60px;
            transform-origin: bottom;
        }
        #p12{
            position: absolute;
            left: 100px;
            top: 0px;
        }
        #p3{
            position: absolute;
            left: 190px;
            top: 84px;
        }
        #p6{
            position: absolute;
            left: 105px;
            top: 165px;
        }
        #p9{
            position: absolute;
            left: 20px;
            top: 82px;
        }
    </style>
    <div id="circle">
        <ul id="kedu"></ul>
    </div>
    <div id="second"></div><!--Draw the second hand-->
    <div id="min"></div><!--Draw the minute hand-->
    <div id="hour"></div><!--Draw the hour hand-->
    <p id="p12">12</p>
    <p id="p3">3</p>
    <p id="p6">6</p>
    <p id="p9">9</p>
    <script>
        // Draw the clock scale and dynamically create 60 li tags.
        function li(){
            let ul=document.getElementById("kedu"); //Get ul first, because li needs to be created under ul.
            let css; //Used to store the CSS settings in the style of li.
            for(let i=0;i<60;i++){
                css+=`#kedu li:nth-of-type(${i+1}){transform:rotate(${i*6}deg)}`//Loop to set the rotation angle of the i+1th li under ul. The rotation center of li must be set in css ul.innerHTML+=`<li></li>`;//+= should be used here. If = is used directly, only one li will be created because it will cover the previous li. In order to avoid covering, use +=.
            }
            let sty=document.getElementById("style")//Get the style tag here.
            sty.innerHTML+=css //Write the CSS style of the li tag under ul into style.
        }
        li(); //This is the end of the scale drawing.

        function time(){
            let s=document.getElementById("second"); //Get the three pointers of hour, minute and second, which will be used to rotate them dynamically later.
            let m = document.getElementById("min");
            let h = document.getElementById("hour");

            //Get the time.
            let date = new Date();
            let snum=date.getSeconds(); //Get the current time in seconds.
            let mnum = date.getMinutes() + snum / 60; //Get the current minute. Don't forget to add seconds / 60.
            let hnum=date.getHours()+mnum/60; //When getting the current time, don't forget to add minutes/60.
            
            s.style.transform=`rotate(${snum*6}deg)`; //The set trasnform can make them rotate, and the second hand rotates 6 degrees per second.
            m.style.transform = `rotate(${mnum*6}deg)` // The minute hand also rotates 6 degrees per minute.
            h.style.transform = `rotate(${hnum*30}deg)` // Here it is hour, one hour rotates 30 degrees, so *30.
        }
        setInterval(time,100) //Use the timer to run this time function every 100ms.
    </script>
</body>
</html>

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:
  • Native JS to implement real-time 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

<<:  How to use CSS to write different styles according to sub-elements

>>:  HTML weight loss Streamline HTML tags to create web pages

Recommend

Common causes and solutions for slow MySQL SQL statements

1. Slow query due to lack of index or invalid ind...

Vue project implements graphic verification code

This article example shares the specific code of ...

How to set static IP in CentOS7 on VirtualBox6 and what to note

Install CentOS 7 after installing VirtualBox. I w...

Graphic tutorial on configuring log server in Linux

Preface This article mainly introduces the releva...

Tutorial on building an FTP server in Ubuntu 16.04

Ubuntu 16.04 builds FTP server Install ftp Instal...

Linux debugging tools that developers and operators must look at [Recommended]

System performance expert Brendan D. Gregg update...

MySQL 8.0.22 installation and configuration graphic tutorial

MySQL8.0.22 installation and configuration (super...

About the problem of offline installation of Docker package on CentOS 8.4

The virtual machine used is CentOS 8.4, which sim...

MySQL REVOKE to delete user permissions

In MySQL, you can use the REVOKE statement to rem...

HTML meta explained

Introduction The meta tag is an auxiliary tag in ...

js to achieve the pop-up effect

This article example shares the specific code of ...

Example of using Nginx to implement port forwarding TCP proxy

Table of contents Demand Background Why use Nginx...