css3++js钟表

Posted 瞅我干啥?

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3++js钟表相关的知识,希望对你有一定的参考价值。

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7     div{
  8         width:200px;
  9         height:200px;
 10         border-radius: 50%;
 11         border:1px solid #000;
 12         position: relative;
 13         margin:5px auto;
 14         text-align: center;
 15         box-shadow: 0px 0px 20px 5px #000;
 16     }
 17     div span{
 18         transform-origin: bottom center;
 19     }
 20     .sec{
 21         position: absolute;
 22         top:50%;
 23         left:50%;
 24         margin-left:-2px;
 25         margin-top:-80px;
 26         height:80px;
 27         width:4px;
 28         background: red;
 29         border-radius: 50% 50% 0 0;
 30     }
 31     .min{
 32         position: absolute;
 33         top:50%;
 34         left:50%;
 35         margin-left:-3px;
 36         margin-top:-60px;
 37         height:60px;
 38         width:6px;
 39         background: #000;
 40         border-radius: 50% 50% 0 0;
 41     }
 42     .hou{
 43         position: absolute;
 44         top:50%;
 45         left:50%;
 46         margin-left:-4px;
 47         margin-top:-40px;
 48         height:40px;
 49         width:8px;
 50         background: #000;
 51         border-radius: 50% 50% 0 0;
 52     }
 53     .cap{
 54         position: absolute;
 55         top:50%;
 56         left:50%;
 57         margin-left:-6px;
 58         margin-top:-6px;
 59         height:12px;
 60         width:12px;
 61         background: radial-gradient(#ccc,#999);
 62         border-radius: 50%;
 63     }
 64     i b{
 65         position: absolute;
 66         top:12px;
 67         left:-4px;
 68     }
 69     </style>
 70     <script>
 71     window.onload=function(){
 72         var aSpan=document.querySelectorAll(span);
 73         var oBox=document.getElementById(box);
 74         clock();
 75         setInterval(clock,30);
 76 
 77         for (var i = 0; i <60; i++) {
 78             var oI=document.createElement(i);
 79             oI.style.width=6px;
 80             if(i%5){
 81                 oI.style.height=8px;
 82             }else{
 83                 oI.innerHTML=<b>+i/5+</b>;
 84                 oI.children[0].style.transform=rotate(-+i*6+deg);
 85                 oI.style.height=16px;
 86             }
 87             
 88             oI.style.position=absolute;
 89             oI.style.top=0px;
 90             oI.style.left=100px;
 91             oI.style.background=#000;
 92             oI.style.transform=rotate(+i*6+deg);
 93             oI.style.transformOrigin=0px 100px;
 94 
 95             oBox.appendChild(oI);
 96         }
 97         function clock(){
 98             var oDate=new Date();
 99             var h=oDate.getHours();
100             var m=oDate.getMinutes();
101             var s=oDate.getSeconds();
102             var ms=oDate.getMilliseconds();
103             
104             aSpan[2].style.transform=rotate(+(360*(h%12)/12+m*30/60)+deg);
105             aSpan[1].style.transform=rotate(+(360*m/60+s*6/60)+deg);
106             aSpan[0].style.transform=rotate(+(360*s/60+ms*6/1000)+deg);
107         }
108     };
109     </script>
110 </head>
111 <body>
112     <div id="box">
113         <span class="sec"></span>
114         <span class="min"></span>
115         <span class="hou"></span>
116         <p class="cap"></p>
117     </div>
118 </body>
119 </html>

 

以上是关于css3++js钟表的主要内容,如果未能解决你的问题,请参考以下文章

用CSS3写的钟表

使用 canvas+JS绘制钟表

分享一个纯CSS写的钟表式计时器

css3 怎么画时钟的刻度

html,css,js实现的一个钟表

利用构造函数 创建钟表