前几天没事写的个模拟时钟，代码仅供小白参考，大神请自动绕过。
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>
1 (function () { 2 3 var blockwise = document.querySelector("#blockDial .blockwise"); 4 var secondHand = document.querySelector("#blockDial .secondHand"); 5 var minuteHand = document.querySelector("#blockDial .minuteHand"); 6 var currentTime = document.querySelector("#currentTime"); 7 8 function formate(num) { 9 return num>=10? num:"0"+num; 10 } 11 12 setInterval(function () { 13 var time = new Date(); 14 currentTime.innerHTML = formate(time.getHours()) + ":" + 15 formate(time.getMinutes()) + ":" + formate(time.getSeconds()); 16 17 var angleSeconds = time.getSeconds() * 6; 18 rotateDiv(secondHand, angleSeconds); 19 20 var angleHours = time.getHours() * 30; 21 rotateDiv(blockwise, angleHours); 22 23 var angleMinute = time.getMinutes() * 6; 24 rotateDiv(minuteHand, angleMinute); 25 }, 1000); 26 27 function rotateDiv(target, angle) { 28 target.style.transform = "rotate(" + angle + "deg) "; 29 target.style.transformOrigin = "100% 100%"; 30 } 31 32 document.body.addEventListener("click", function (event) { 33 console.log(event.pageX, event.pageY); 34 }); 35 })();
吐槽：这代码水准已经是我那时候的最高水平了，╮(╯▽╰)╭