初学js 自制表盘时钟很简单
2016-07-25 21:26:08 来源：慕课网
<!doctype html><html><head><meta charset="utf-8"><title>clock</title></head><style type="text/css">* { margin: 0; padding: 0;}#wrap { position: relative; width: 300px; height: 300px; background: #09F; text-align: center; margin: 0 auto; border-radius: 150px;}.a1 { display: block; width: 300px; height: 5px; transform: rotate(0deg); position: absolute; top: 147px; left: 0px;}.left { display: block; float: left; width: 20px; height: 5px; background: #9F3;}.right { display: block; float: right; width: 20px; height: 5px; background: #9F3;}.po { width: 20px; height: 20px; background: #000; border-radius: 10px; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -10px; z-index:99;}#mz { height: 300px; width: 5px; transform: rotate(0deg); position: absolute; top: 0px; left: 149px; z-index:80;}.mz { width: 5px; height:155px; margin: 45px 0 100px 0; background: #60F;}#fz { width: 7px; height: 300px; transform: rotate(0deg); position: absolute; top: 0px; left: 148px; z-index:10;}.fz { width: 7px; height: 135px; margin: 55px 0 110px 0; background:#00F;}#sz { width: 10px; height: 300px; transform: rotate(0deg); position: absolute; top: 0px; left: 145px; z-index:5;}.sz { width: 10px; height: 110px; margin: 70px 0 120px 0; background:#9F9;}</style><body onLoad="add()"><div id="wrap"> <!--外表包装--> <a href="#" class="a1"><!-- 外表的刻度--> <p class="left"></p> <p class="right"></p> </a> <div class="po"></div><!--中心圆点--> <div id="mz"><!--秒针下面格式一样--> <div class="mz"></div> </div> <div id="fz"> <div class="fz"></div> </div> <div id="sz"> <div class="sz"></div> </div></div></body><script type="text/javascript"> function add(){//添加刻度 for( var i=0;i<30;i++) { var a1=document.createElement('a'); a1.className='a1'; var p1=document.createElement("p"); p1.className='left'; var p2=document.createElement("p"); p2.className='right'; if(i%5==0){ a1.style.height='8px'; p1.style.height='8px'; p1.style.width='30px'; p2.style.height='8px'; p2.style.width='30px'; } a1.appendChild(p1); a1.appendChild(p2); a1.style.transform='rotate('+6*i+'deg)'; oldh.appendChild(a1); } //oldh.innerHTML= navigator.appCodeName; } var mz=document.getElementById('mz'); var oldh= document.getElementById("wrap"); var fz=document.getElementById('fz'); var sz=document.getElementById('sz');function c(){ var d= new Date(); var h=d.getHours(); var h12=h<12?h:h-12;//转换成12小时制 mz.style.transform='rotate('+ (d.getSeconds())*6+'deg)';//旋转角度设置 fz.style.transform='rotate('+ (d.getMinutes())*6+'deg)'; sz.style.transform='rotate('+ ((h12)*30 +d.getMinutes()*0.5)+'deg)'; } setInterval("c()",1000);//循环 总比系统时间慢一秒！！不管了！</script></html>