前几天没事写的个模拟时钟，代码仅供小白参考，大神请自动绕过。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模拟时钟</title> 6 <style> 7 body { 8 margin: 0; 9 padding: 0; 10 } 11 12 #blockDial { 13 width: 200px; 14 height: 200px; 15 border: 2px solid black; 16 border-radius: 50%; 17 position: relative; 18 background-color: coral; 19 } 20 21 .heart { 22 width: 10px; 23 height: 10px; 24 background-color: black; 25 margin: 95px auto; 26 border-radius: 50%; 27 } 28 29 .blockwise { 30 width: 2px; 31 height: 80px; 32 background-color: black; 33 position: absolute; 34 left: 99px; 35 top: 20px; 36 z-index: 10; 37 } 38 .secondHand{ 39 width: 2px; 40 height: 50px; 41 background-color: black; 42 position: absolute; 43 left: 99px; 44 top: 50px; 45 z-index: 10; 46 } 47 .minuteHand{ 48 width: 2px; 49 height: 65px; 50 background-color: black; 51 position: absolute; 52 left: 99px; 53 top: 35px; 54 z-index: 10; 55 } 56 #currentTime{ 57 width: 120px; 58 height: 30px; 59 border: 1px solid black; 60 margin: 10px 40px; 61 text-align: center; 62 line-height: 30px; 63 } 64 .num{ 65 font-size: 24px; 66 color: aqua; 67 position: absolute; 68 } 69 .num3{ 70 top:42%; 71 left: 90%; 72 } 73 .num6{ 74 top:86%; 75 left: 46%; 76 } 77 .num9{ 78 top:42%; 79 left: 0; 80 } 81 .num12{ 82 top:0; 83 left: 44%; 84 } 85 </style> 86 </head> 87 <body> 88 <div id="blockDial"> 89 <div class="heart"></div> 90 <div class="blockwise"></div> 91 <div class="secondHand"></div> 92 <div class="minuteHand"></div> 93 <div class="num num3">3</div> 94 <div class="num num6">6</div> 95 <div class="num num9">9</div> 96 <div class="num num12">12</div> 97 </div> 98 <div id="currentTime"></div> 99 <script src="main.js"></script> 100 </body> 101 </html>