HTML Makes Simple Clocks
Using HTML, CSS, jQuery, JS to make clocks can get the system time and make the pointers of the clocks change in real time without much code.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Myclock</title> <style> *{ margin: 0; padding: 0; } /* Clock dial position*/ .clock{ width: 400px; height: 400px; margin-top: 50px; margin-left: auto; margin-right: auto; overflow: hidden; } /* Dial style*/ .clockTable{ width: 300px; height: 300px; background-color: rgba(0,0,255,0.5); border: 1px rgba(0,0,0,0.5) solid; margin: 50px; position: relative; border-radius: 100%; overflow: hidden; } /* Hour hand style*/ .hour{ position: absolute; height: 85px; box-sizing: border-box; border: 1px #000 solid; top: 148px; left: 148px; transform-origin: top; border-radius: 50px; } /* Minute hand pattern*/ .minute{ position: absolute; height: 100px; box-sizing: border-box; border: 1px #000 solid; left: 148px; top: 148px; transform-origin: top; border-radius: 50px; } /* Second hand pattern*/ .second{ position: absolute; height: 115px; box-sizing: border-box; border: 1px #000 solid; left: 148px; top: 148px; transform-origin: top; border-radius: 50px; } .numClock{ width: 300px; height: 50px; text-align: center; line-height: 50px; margin: 0 auto; font-size: 20px; } </style> </head> <body> <section class="clock"> <section class="clockTable" id="circle"> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> </section> </section> <section class="numClock"></section> <!-- Introduce jQuery Networking use--> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <!-- Introduce jQuery Local file, note file path --> <script src="jquery.js"></script> <!-- //Both jQuery introductions are possible. The first is to use files on the network, so it needs to be used on the network. //The second is to download the files on the network to local use without the need for networking. --> <script> //Use arrays to store Greek letters on clocks var array = ['Ⅰ','Ⅱ','Ⅲ','Ⅳ','Ⅴ','Ⅵ','Ⅶ','Ⅷ','Ⅸ','Ⅹ','Ⅺ','Ⅻ'] var cir = document.getElementById("circle") //Calibration on display dial for(var i=0;i<60;i++){ var mark = '<div style="transform-origin: bottom;left: 147px;position: absolute;width: 2px;height: 150px;transform:rotateZ('+((i+1)*6)+'deg);">' if((i+1)%5==0){ //The first div makes the dial scale, and the second div rotates back the previously rotated content. mark += ('<div style="box-sizing: border-box;height: 15px;width: 2px;background-color: #000000;"></div>'+'<div style="position: absolute;width: 20px;left: -10px;height: 20px;transform:rotateZ('+(-(((i+1)/5))*30)+'deg);text-align: center;">'+array[(((i+1)/5)-1)]+'</div>'+'</div>') }else{ mark += ('<div style="box-sizing: border-box;height: 10px;width: 2px;background-color: #000000;"></div>'+'</div>') } cir.innerHTML+=mark } // Get the current system time and change the pointer position function Time(){ // get SysTime var time = new Date() var y = time.getFullYear() var month = time.getMonth()+1 // JQ needs to add one more month to get the system month var d = time.getDate() // The current date cannot be retrieved using getDay(). var h = time.getHours() var m = time.getMinutes() var s = time.getSeconds() //Splicing fewer than two digits into two by strings if(month < 10){ month = '0' + month } if(d < 10){ d = '0' + d } if(h < 10){ h = '0' + h } if(m < 10){ m = '0' + m } if(s < 10){ s = '0' + s } // Digital clock display, put in 24 hours before converting to 12 hours, to avoid hours greater than 12 hours into less than 12 hours. $(".numClock").html(y+'-'+month+'-'+d+' '+h+':'+m+':'+s) // Converting 24-hour system to 12-hour system if(h > 12){ h = h - 12 }else{ h = h } // At the beginning, the pointer points to VI, so add 180 DEG to make the pointer point to_ $(".hour").css({ // A total of 12 hour-hand scales, using the acquired hour (h*30) as the angle of the current hour-hand rotation; the minute needle rotates 360 deg, the hour-hand rotates 12 deg, so the hour-hand angle increases more (m/5)deg. "transform": "rotateZ("+((h*30+180)+(m/5))+"deg)" }) $(".minute").css({ // A total of 60 minute-hand scales are made, using the obtained minute (m*6) as the current minute-hand rotation angle; the second hand rotates 360 DEG and the minute hand rotates 6 deg, so the minute-hand angle increases more (s/10)deg. "transform": "rotateZ("+((m*6+180)+(s/10))+"deg)" }) $(".second").css({ // A total of 60 secondhand scales, using the acquired seconds (s*6) as the current secondhand rotation angle "transform": "rotateZ("+(s*6+180)+"deg)" }) } // Real-time call to get system time window.onload=function(){ setInterval("Time()",500); // Timer, Set 500 ms interval to improve accuracy } </script> </body> </html>
After copying, changing the style inside can get more style effect. Here is a simple style display. Each step of the code has very detailed annotations to help you understand how to make it faster. Because I am only a beginner of the knowledge of the Web, there may be a large part of the code redundancy, in order to achieve results without further optimization, you are welcome to ask questions and corrections.
Design sketch