纯js+html+css实现模拟时钟

Posted 2020-08-04 晨落梦公子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯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>

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实现模拟时钟的主要内容，如果未能解决你的问题，请参考以下文章

纯CSS实现滚轮时钟

纯CSS实现逼真翻页时钟

纯CSS3时钟

纯shader实现动态时钟效果(three.js实战14)