Css3+Js實現漂亮時鐘，瀏覽器支援IE9/GoogleChrome/FireFox/Safari等等，感興趣的朋友可以下載測試，希望對你學習css3有所協助
Css3+Js 漂亮時鐘
瀏覽器支援 IE9/GoogleChrome/FireFox/Safari
：
HTML代碼
<!DOCTYPE html> <html> <head> <meta > <title>css3+js打造漂亮時鐘</title> <style> body{background: -webkit-radial-gradient(center center,circle,#666,#000); margin: 0;} p{margin: 0; padding: 0;} .box{padding-top: 50px; width:410px; margin: 0 auto;} .clock{position: relative; width:400px; height: 400px; border: 5px solid #fff; border-radius: 200px; background:-webkit-radial-gradient(center center,circle,#fff,#bbb); box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.8); } .clock .clock-xin{position: absolute; top: 50%; left: 50%; width:30px; height: 30px; border-radius: 15px; background: #eee;margin:-15px 0 0 -15px;} .clock .clock-xin2{position: absolute; top: 50%; left: 50%; width:12px; height: 12px; border-radius: 6px; background: #f00; z-index: 100; margin:-6px 0 0 -6px;} .clock .date{position: absolute; z-index: 3; top: 245px; left: 130px; font-size: 20px; color: #000; text-shadow: 1px 1px white; } .clock .hour{position: absolute; z-index: 3; top: 50%; left: 50%; width:160px; height: 6px; border-radius:5px; background: #000; -webkit-transform-origin: 10px 50%; margin:-3px 0 0 -10px;} .clock .min{position: absolute; z-index: 4;top: 50%; left: 50%; width:180px; height: 4px; border-radius:5px; background: #333; -webkit-transform-origin: 10px 50%; margin:-2px 0 0 -10px;} .clock .sec{position: absolute; z-index: 5; top: 50%; left: 50%; width:210px; height: 2px; background: #f00; -webkit-transform-origin: 30px 50%; margin:-1px 0 0 -30px;} .clock em{display: block; width: 2px; height: 5px; background: #000; position: absolute; top: 0; left: 0; -webkit-transform-origin: 50% 0; margin-left: -1px;} .clock em.ishour{width: 6px; height: 10px; margin-left: -3px;} .clock em.ishour i{font-size: 25px; color: #000; position: absolute; top: 12px; left: -7px;text-shadow: 1px 1px white; } </style> </head> <body> <p style="color:white;">瀏覽器支援：GoogleChrome</p> <p class="box"> <p class="clock" id="clock"> <p class="clock-xin"></p> <p class="clock-xin2"></p> <p id="date" class="date"></p> <p id="hour" class="hour"></p> <p id="min" class="min"></p> <p id="sec" class="sec"></p> </p> </p> <script> window.onload = function() { var winHeight = document.documentElement.clientHeight; document.getElementsByTagName('body')[0].style.height = winHeight+'px'; var $clock = document.getElementById('clock'), $date = document.getElementById('date'), $hour = document.getElementById('hour'), $min = document.getElementById('min'), $sec = document.getElementById('sec'), oSecs = document.createElement('em'); for (var i = 1; i < 61; i++) { var tempSecs = oSecs.cloneNode(), pos = getSecPos(i); if(i%5==0){ tempSecs.className = 'ishour'; tempSecs.innerHTML = '<i style="-webkit-transform:rotate('+(-i*6)+'deg);">'+(i/5)+'</i>'; } tempSecs.style.cssText='left:'+pos.x+'px; top:'+pos.y+'px; -webkit-transform:rotate('+i*6+'deg);'; $clock.appendChild(tempSecs); } // 圓弧上的座標換算 function getSecPos(dep) { var hudu = (2*Math.PI/360)*6*dep, r = 200; //半徑大小 return { x: Math.floor(r + Math.sin(hudu)*r), y: Math.floor(r - Math.cos(hudu)*r), } } ;(function() { // 目前時間 var _now = new Date(), _h = _now.getHours(), _m = _now.getMinutes(), _s = _now.getSeconds(); var _day = _now.getDay(); _day = (_day==0)?7:_day; if(_day==1){ _day = "一"; }else if(_day==2){ _day = "二"; }else if(_day==3){ _day = "三"; }else if(_day==4){ _day = "四"; }else if(_day==5){ _day = "五"; }else if(_day==6){ _day = "六"; }else if(_day==7){ _day = "日"; } $date.innerHTML = _now.getFullYear()+'-'+(_now.getMonth()+1)+'-'+_now.getDate()+' 星期'+_day; //繪製時鐘 var gotime = function(){ var _h_dep = 0; _s++; if(_s>59){ _s=0; _m++; } if(_m>59){ _m=0; _h++; } if(_h>12){ _h = _h-12; } //時針位移距離 _h_dep = Math.floor(_m/12)*6; $hour.style.cssText = '-webkit-transform:rotate('+(_h*30-90+_h_dep)+'deg);'; $min.style.cssText = '-webkit-transform:rotate('+(_m*6-90)+'deg);'; $sec.style.cssText = '-webkit-transform:rotate('+(_s*6-90)+'deg);'; }; gotime(); setInterval(gotime, 1000); })(); }; </script> </body> </html>
以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
