HTML+CSS3 Implementing a Web Clock

To implement the clock function on a webpage, the effect is as shown in the image on the right:

The key techniques used are: rotation, rotation base point setting in CSS3

Rotation: transform:rotate (*deg)

Rotation base point: transform-origin:x axis offset y-axis offset

Style code:

<style type= "text/css" id= "style" > #clock{width:200px;Height:200px;Border:1px solid #000000;margin:100px Auto;Border-radius:50%;position:relative; }#ul{margin:0;padding:0;List-style:None;position:relative; }#ul Li{width:2px;Height:6px;background:#000;position:Absolute;Top:0; Left:98px;-webkit-transform-origin:Center 100px;/*the center point of rotation on the dial is centered on the dial, the middle of the x-axis, and the y-axis is 100 from the top.*/}#ul Li:nth-of-type (5n+1){Height:10px; }#clock Div{position:Absolute;-webkit-transform-origin:Center Bottom; }#hour{width:8px;Height:45px;background:#0c0c0c; Left:96px;Top:55px; }#min{width:6px;Height:60px;background:#c0c0c0; Left:97px;Top:40px; }#sec{width:4px;Height:80px;background:Red; Left:98px;Top:20px; }#ico{width:20px;Height:20px;background:#000000;Border-radius:50%; Left:90px;Top:90px; }#time{text-align:Center; }</style>

View Code

JavaScript code:

<script type= "Text/javascript" >window.onload=function(){            varOul = document.getElementById (' ul '); varOhour = document.getElementById (' Hour ')); varOmin = document.getElementById (' min ')); varOSec = document.getElementById (' sec '); varOstyle = document.getElementById (' style ')); varOtime = document.getElementById (' Time '); varILi = ' '; varIstyle = ' ';  for(vari=0;i<60;i++) {Istyle+ = ' #ul li:nth-of-type (' + (i+1) + ') {-webkit-transform:rotate (' + (i*6) + ' deg)} '; ILi+ = ' <li></li> '; } oul.innerhtml=ILi; Ostyle.innerhtml+=Istyle; functionTomove () {varIhour = ' '; varImin = ' '; varISec = ' '; varOdate =NewDate (); ISec=odate.getseconds (); Imin= Odate.getminutes () +isec/60; Ihour = Odate.gethours () +imin/60;OSec.style.webkitTransform= ' Rotate (' + (isec*6) + ' deg) '; OMin.style.webkitTransform= ' Rotate (' + (imin*6) + ' deg) ';/**/OHour.style.webkitTransform= ' Rotate (' + (ihour*30) + ' deg) ';/*dial 12 hours, total 360 degrees, 30 degrees per hour .*/otime.innerhtml= ' The current time is: ' + math.floor (ihour) + ' when ' +math.floor (imin) + ' min ' +isec+ ' s '; } setinterval (Tomove,1000);    }; </script>

View Code

Page Layout code:

 <DivID= "Clock">        <ulID= "ul">            <Li></Li>            <Li></Li>            <Li></Li>            <Li></Li>            <Li></Li>            <Li></Li>            <Li></Li>        </ul>        <DivID= "Hour"></Div>        <DivID= "min"></Div>        <DivID= "SEC"></Div>        <DivID= "ico"></Div>    </Div>    <DivID= "Time"></Div>

View Code

HTML+CSS3 Implementing a Web Clock