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). 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:
|
<<: How to use CSS to write different styles according to sub-elements
>>: HTML weight loss Streamline HTML tags to create web pages
Table of contents background What is tablespace f...
This article describes the MySQL data types and f...
Problem: vue-cil3 runs with warnings potentially ...
The computer system is: win7 This article is main...
1. Introduction Image maps allow you to designate...
This article is mainly to take you to quickly und...
CSS naming conventions (rules) Commonly used CSS ...
Find the installation directory of VirtualBox. Th...
When a company builds Docker automated deployment...
HTML is the abbreviation of Hypertext Markup Langu...
Table of contents EffectList Collection EffectLis...
After MySQL database optimization, not only can t...
This article shares the specific code for JavaScr...
Abstract: MySQL provides a variety of storage eng...
Copy code The code is as follows: <hr style=&q...