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: