首页 > 代码库 > css3++js钟表
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钟表
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。