我们先来看看效果图吧
再来奉上源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 钟表</title> <style> .clock{ position: relative; width: 200px; height: 200px; border-radius: 110px; border: 10px solid #000; margin: 200px auto; } .line1,.line4{ position: absolute; background-color: #aaa; width: 10px; height: 200px; left: 50%; margin-left: -5px; } .line2,.line3,.line5,.line6{ position: absolute; background-color: #ccc; width: 8px; height: 200px; left: 50%; margin-left: -4px; } .line2{ transform: rotate(30deg); } .line3{ transform: rotate(60deg); } .line4{ transform: rotate(90deg); } .line5{ transform: rotate(120deg); } .line6{ transform: rotate(150deg); } .cover{ position: absolute; width: 180px; height: 180px; background-color: #fff; left: 50%; top: 50%; margin: -90px 0 0 -90px; border-radius: 90px; } .dotted{ position: absolute; width: 20px; height: 20px; background-color: #000; border-radius: 10px; left: 50%; top: 50%; z-index: 2; margin: -10px 0 0 -10px; } .hour{ position: absolute; width: 10px; height: 60px; background-color: #ccc; left: 50%; top: 50%; margin: -60px 0 0 -5px; } .minute{ position: absolute; width: 8px; height: 70px; background-color: #ddd; left: 50%; top: 50%; margin: -70px 0 0 -4px; } .seconds{ position: absolute; width: 6px; height: 80px; background-color: red; left: 50%; top: 50%; margin: -80px 0 0 -3px; } .minute,.hour,.seconds{ transform-origin: center bottom; } </style> <script> window.onload = function () { var hour = document.querySelector(".hour"); var minute = document.querySelector(".minute"); var second = document.querySelector(".seconds"); var h = 0,m = 0,s = 0,ms =0; setInterval(fn,10); function fn () { var date = new Date(); ms = date.getMilliseconds(); s = date.getSeconds()+ms/1000; m = date.getMinutes()+s/60; h = date.getHours()%12+m/60; second.style.WebkitTransform = "rotate("+s*6+"deg)"; minute.style.WebkitTransform = "rotate("+m*6+"deg)"; hour.style.WebkitTransform = "rotate("+h*30+"deg)"; } } </script> </head> <body> <div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>
再给大家分享一个网友的作品
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=uft-8"> <title>利用JS和CSS3制作的时钟效果</title> <style type="text/css"> #clock{width:300px;height:300px;border:15px solid #333;position:relative; border-radius:300px; -moz-border-radius:300px; -webkit-border-radius:300px; -o-border-radius:300px; -ms-border-radius:300px; background:#ddd; background:radial-gradient(#fff,#ddd); background:-moz-radial-gradient(#fff,#ddd); background:-webkit-radial-gradient(#fff,#ddd); background:-o-radial-gradient(#fff,#ddd); background:-ms-radial-gradient(#fff,#ddd); box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset; -moz-box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset; -webkit-box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset; -o-box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset; -ms-box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset; } .clock-core{width:16px;height:16px;background:#f00;position:absolute;left:50%;top:50%;margin:-8px 0 0 -8px;z-index:30; border-radius:16px; -moz-border-radius:16px; -webkit-border-radius:16px; -o-border-radius:16px; -ms-border-radius:16px; } #clock-h,#clock-m,#clock-s{width:6px;height:70px;background:#333;position:absolute;left:50%;top:50%;margin:-70px 0 0 -3px;z-index:10; transform-origin:50% 100%; -moz-transform-origin:50% 100%; -webkit-transform-origin:50% 100%; -o-transform-origin:50% 100%; -ms-transform-origin:50% 100%; } #clock-m{height:100px;margin-top:-100px} #clock-s{width:2px;height:155px;margin:-135px 0 0 -1px;background:#f00; transform-origin:50% 87.097%; -moz-transform-origin:50% 87.097%; -webkit-transform-origin:50% 87.097%; -o-transform-origin:50% 87.097%; -ms-transform-origin:50% 87.097%; } #clock-h b,#clock-m b{width:0;height:0;font-size:0;border:3px dashed transparent;border-bottom:3px solid #333;position:absolute;left:0;top:-6px} .big-mark,.small-mark{width:4px;height:12px;background:#333;position:absolute;left:50%;top:0;margin-left:-2px; transform-origin:50% 0%; -moz-transform-origin:50% 0%; -webkit-transform-origin:50% 0%; -o-transform-origin:50% 0%; -ms-transform-origin:50% 0%; } .small-mark{width:2px;height:5px;background:#999;margin-left:-1px} .big-mark i{font:700 20px/1.5 Arial;position:absolute;left:-100%;top:12px} .c60 i{font:700 20px/1.5 Arial;position:absolute;left:-200%;top:12px} #clock-date{width:170px;height:24px;line-height:24px;background:#fff;color:#666;border:1px solid #ccc;text-align:center;position:absolute;left:50%;bottom:70px;margin:0 0 0 -85px;border-radius:6px} </style> <script type="text/javascript"> function clock(){ var $=function(id){return document.getElementById(id)}; //写入刻度DOM，以及刻度的定位 function mark(){ //圆的半径 var r=parseFloat(window.getComputedStyle?window.getComputedStyle($("clock"),null).width:$("clock").currentStyle["width"])/2; //插入DOM for(var i=1;i<61;i++){ $("clock-mark").innerHTML+="<b><i></i></b>"; var ci=document.getElementsByClassName("c"+i)[0]; var cii=ci.getElementsByTagName("i")[0]; //利用正弦定理计算刻度的定位 ci.style.left=r+r*(Math.sin(i*6*2*Math.PI/360))+"px"; /*注意正弦的角度制算法和弧度制算法，Math.sin的参数是弧度制算法，所以先把角度转换成弧度，再计算*/ ci.style.top=r-r*(Math.sin((90-i*6)*2*Math.PI/360))+"px"; //计算转动的角度 /*other*/ ci.style.transform="rotate("+i*6+"deg)"; /*FF*/ ci.style.MozTransform="rotate("+i*6+"deg)"; /*webkit*/ ci.style.WebkitTransform="rotate("+i*6+"deg)"; /*opera*/ ci.style.OTransform="rotate("+i*6+"deg)"; /*ms*/ ci.style.msTransform="rotate("+i*6+"deg)"; //大刻度 if(i%5==0){ ci.className="c"+i+" "+"big-mark"; cii.innerHTML=i/5; } //小刻度 else{ ci.className="c"+i+" "+"small-mark"; ci.removeChild(cii); } //把数字转正 var iRotate=-i*6; cii.style.transform="rotate("+iRotate+"deg)"; cii.style.MozTransform="rotate("+iRotate+"deg)"; cii.style.WebkitTransform="rotate("+iRotate+"deg)"; cii.style.OTransform="rotate("+iRotate+"deg)"; cii.style.msTransform="rotate("+iRotate+"deg)"; } } //指针的转动 function turnR(){ var d=new Date(); var h=d.getHours(); var m=d.getMinutes(); var s=d.getSeconds(); var sRadius=360/60*s; var mRadius=360/60*m; //如果需要分针匀速移动，就赋值var mRadius=360/60*m+360/60/60*s var hRadius=360/12*h+30/60*m; var ch=$("clock-h"); var cm=$("clock-m"); var cs=$("clock-s"); /*other*/ ch.style.transform="rotate("+hRadius+"deg)"; cm.style.transform="rotate("+mRadius+"deg)"; cs.style.transform="rotate("+sRadius+"deg)"; /*FF*/ ch.style.MozTransform="rotate("+hRadius+"deg)"; cm.style.MozTransform="rotate("+mRadius+"deg)"; cs.style.MozTransform="rotate("+sRadius+"deg)"; /*webkit*/ ch.style.WebkitTransform="rotate("+hRadius+"deg)"; cm.style.WebkitTransform="rotate("+mRadius+"deg)"; cs.style.WebkitTransform="rotate("+sRadius+"deg)"; /*opera*/ ch.style.OTransform="rotate("+hRadius+"deg)"; cm.style.OTransform="rotate("+mRadius+"deg)"; cs.style.OTransform="rotate("+sRadius+"deg)"; /*ms*/ ch.style.msTransform="rotate("+hRadius+"deg)"; cm.style.msTransform="rotate("+mRadius+"deg)"; cs.style.msTransform="rotate("+sRadius+"deg)"; setTimeout(turnR,1000); } /*显示日期*/ function clockDate(){ var d=new Date(); var week=["日","一","二","三","四","五","六"]; $("clock-date").innerHTML=d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日"+" 星期"+week[d.getDay()]; } //调用函数 mark(); turnR(); clockDate(); } window.onload=clock; </script> </head> <body> <div> <b></b> <div> <b></b> </div> <div> <b></b> </div> <div></div> <div></div> <div></div> </div> </body> </html>
您可能感兴趣的文章: