钟表来一个。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js+css3</title> <style> .sz{ background:#FC9; border-radius:50%; width:200px; height:200px; position:relative;} .hours{ position:absolute; width:6px; height:40px; background-color:#000; left:97px; bottom:100px; transform-origin:bottom; -webkit-transform:rotate(0deg); -webkit-transform-origin:bottom;-moz-transform:rotate(0deg); -moz-transform-origin:bottom;-o-transform:rotate(0deg); -o-transform-origin:bottom;} .minutes{ position:absolute; width:4px; height:50px; background-color:#6CF;left:98px; bottom:100px; transform-origin:bottom;-webkit-transform:rotate(0deg); -webkit-transform-origin:bottom;-moz-transform:rotate(0deg); -moz-transform-origin:bottom;-o-transform:rotate(0deg); -o-transform-origin:bottom;} .seconds{ position:absolute; width:2px; height:70px; background-color:#F66;left:99px; bottom:100px; transform-origin:bottom;-webkit-transform:rotate(0deg); -webkit-transform-origin:bottom;-moz-transform:rotate(0deg); -moz-transform-origin:bottom;-o-transform:rotate(0deg); -o-transform-origin:bottom;} .one{ height:20px; width:5px; position:absolute; background-color:#633; left:97.5px;} .two{ height:20px; width:5px; position:absolute; background-color:#633; left:97.5px; top:180px;} .three{ width:20px; height:5px; position:absolute; background-color:#633; left:0; top:97.5px;} .four{ width:20px; height:5px; position:absolute; background-color:#633; left:180px; top:97.5px;} </style> </head> <body> <p id="pid"></p> <div class="sz"> <div class="szup"> <div id="hours" class="hours"></div> <div id="minutes" class="minutes"></div> <div id="seconds" class="seconds"></div> </div> <div class="szdown"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> </div> </div> </body> </html> <script> var colck=setInterval("Time()",100); function Time(){ var mytime=new Date; var h=mytime.getHours(); var m=mytime.getMinutes(); var s=mytime.getSeconds(); var m=math(m); var s=math(s); document.getElementById("pid").innerHTML=h+":"+m+":"+s; } function math(i){ if(i<10){ i="0"+i; } return i; } var yuanColck=setInterval("shizhen()",100); function shizhen(){ var mytime=new Date; var h=mytime.getHours(); var m=mytime.getMinutes(); var s=mytime.getSeconds(); var hh=document.getElementById("hours"); var mm=document.getElementById("minutes"); var ss=document.getElementById("seconds"); var hds=hdeg(h,m); var mds=mdeg(m); var sds=mdeg(s); hh.style.transform='rotate(' + hds + 'deg)'; mm.style.transform='rotate(' + mds + 'deg)'; ss.style.transform='rotate(' + sds + 'deg)'; hh.style.webkitTransform='rotate(' + hds + 'deg)'; mm.style.webkitTransform='rotate(' + mds + 'deg)'; ss.style.webkitTransform='rotate(' + sds + 'deg)'; hh.style.mozkitTransform='rotate(' + hds + 'deg)'; mm.style.mozkitTransform='rotate(' + mds + 'deg)'; ss.style.mozkitTransform='rotate(' + sds + 'deg)'; hh.style.oTransform='rotate(' + hds + 'deg)'; mm.style.oTransform='rotate(' + mds + 'deg)'; ss.style.oTransform='rotate(' + sds + 'deg)'; } function hdeg(i,j){ if(i<12){ i=i }else{ i=i-12; } i=i*30; j=(j/60)*30; return i+j; } function mdeg(i){ i=i*6; return i; } </script>
网友评论文明上网理性发言 已有0人参与
发表评论: