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

The concept of MySQL tablespace fragmentation and solutions to related problems

Table of contents background What is tablespace f...

How to implement image mapping with CSS

1. Introduction Image maps allow you to designate...

A brief understanding of the relevant locks in MySQL

This article is mainly to take you to quickly und...

CSS naming conventions (rules) worth collecting Commonly used CSS naming rules

CSS naming conventions (rules) Commonly used CSS ...

nginx automatically generates configuration files in docker container

When a company builds Docker automated deployment...

Basic knowledge of HTML: a preliminary understanding of web pages

HTML is the abbreviation of Hypertext Markup Langu...

Simple analysis of EffectList in React

Table of contents EffectList Collection EffectLis...

19 MySQL optimization methods in database management

After MySQL database optimization, not only can t...

JavaScript to implement the back to top button

This article shares the specific code for JavaScr...

Detailed explanation of the syntax and process of executing MySQL transactions

Abstract: MySQL provides a variety of storage eng...

hr horizontal line style example code

Copy code The code is as follows: <hr style=&q...