首页 > 代码库 > 纯js+html+css实现模拟时钟
纯js+html+css实现模拟时钟
前几天没事写的个模拟时钟，代码仅供小白参考，大神请自动绕过。
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 })();
吐槽：这代码水准已经是我那时候的最高水平了，╮(╯▽╰)╭
纯js+html+css实现模拟时钟
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。