1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>简单的圆钟实现</title> 6 <style>
7 #box { 8 width: 300px; 9 height: 300px; 10 margin: 100px auto 0; 11 border: 1px solid; 12 background: url("圆钟.jpeg") no-repeat; 13 background-size: 180%; 14 background-position-x: -129px; 15 position: relative; 16 } 17 18 #shi { 19 width: 6px; 20 height: 80px; 21 background: #000000; 22 position: absolute; 23 left: 147px; 24 top: 100px; 25 transform-origin: 50% 63%; 26 } 27 28 #fen { 29 width: 4px; 30 height: 100px; 31 background: #000; 32 position: absolute; 33 left: 148px; 34 top: 80px; 35 transform-origin: 50% 70%; 36 } 37 38 #miao { 39 width: 2px; 40 height: 120px; 41 background: #ff0000; 42 position: absolute; 43 left: 149px; 44 top: 70px; 45 transform-origin: 50% 67%; 46 } 47 48 #dian { 49 width: 4px; 50 height: 2px; 51 background: blue; 52 position: absolute; 53 left: 149px; 54 top: 149px; 55 transform-origin: 50% 67%; 56 } 57 58 </style> 59 60 61 </head> 62 <body> 63 <div id="box"> 64 <div id="shi"></div> 65 <div id="fen"></div> 66 <div id="miao"></div> 67 <div id="dian"></div> 68 </div> 69 </body> 70 </html> 71 <script> 72 onload = function () { 73 const miao = document.getElementById("miao") 74 const fen = document.getElementById("fen") 75 const shi = document.getElementById("shi") 76 77 function setclock() { 78 const time = new Date(), 79 h = time.getHours(), 80 m = time.getMinutes(), 81 s = time.getSeconds() 82 miao.style.transform = 'rotate(' + s * 6 + 'deg)' 83 //秒：60秒转一圈，一圈为360度，则一秒转6度 84 //这里为什么不要加分钟和小时的度数呢? 因为1秒钟转动的时候分钟和小时是不变的 85 fen.style.transform = 'rotate(' + (m + s / 60) * 6 + 'deg)' 86 //分：1个小时有60分钟，60分钟转一圈,一圈有360度，则每分钟转360度除以60分钟=6度；这里应该是m*6+s/60*6 87 // 提出来共同的*6变为(m+s/60)*6 为什么要加上秒呢 （分钟动一次，秒钟动60次，1分钟有60秒）因为当一分钟变到两分钟的时候， 88 // 经过了60秒所以是s/60也就是加上每秒的度数 1分钟转的时候秒钟也在转 89 shi.style.transform = 'rotate(' + (h + m / 60 + s / 60 / 60) * 30 + 'deg)' 90 //时：一圈为360度，12小时制，那么1小时转动360/12=30度，一个小时有60分钟，当一个小时转到 91 // 下一个小时的时候分钟转了360度（转了一圈），秒转了3600度（转了60圈1分钟秒钟转一圈），那么1个小时的度数就为h*30+m/60+s/60/60(也就是s/3600) 92 //1小时转的时候分钟和秒钟也在不停地转所以要加上他们的度数 93 } 94 95 setclock() 96 setInterval(setclock, 1000) 97 } 98 99 100 </script>