CSS3 Simple Clock

<! DOCTYPE html>Body {/*background-color: #ccc;*/} ol,ul {margin:0; padding:0; List-Style:none; } h1{Text-Align:center; Color: #333; Margin-top:40px; Font-family: ' Microsoft Yahei ';            }. clock{position:relative;            width:200px;            height:200px; Border-radius:100%; Background-color: #292a38;        margin:50px Auto;            }. pointer li.circle{position:absolute; Top:50%; Left:50%; Transform-Origin:left Center;            Background: #fff;            width:10px;            height:10px; Border-radius:100%; Margin-top:-5px; Margin-left:-5px; }        /*. line-demo{Position:absolute;            left:50%;            top:50%;            Transform:rotate ( -60deg) translate (75px,-50%);            Transform-origin:left Center;            width:20px;            height:10px;            background-color:red;        Z-index:1; } */        /*scale*/. Line-hour li,.line-min li{position:absolute; Left:50%; Top:50%; Transform-Origin:left Center; Background-color: #fff; }. Line-hour li{width:10px;        height:2px; }. Line-min li{width:5px;        height:2px; }        /*Digital*/. number {position:absolute;            height:150px;            width:150px; Left:50%; Top:50%; Transform:translate (-50%,-50%); Font-family: ' Microsoft Yahei '; Font-size:15px;        Color: #fff;            }. number Li {position:absolute; Transform:translate (-50%,-50%); }        /*Pointers*/. Pointer li{position:absolute; Top:50%; Left:50%; Transform-Origin:left Center;        Background: #fff;            }. pointer li.hour{width:45px;            height:3px; Margin-top:-1px;            }. pointer li.min{width:60px;            height:2px; Margin-top:-1px;            }. pointer li.sec{width:45px;            height:3px; Margin-top:-1px; }    </style>        $(function(){            functioninit () {DrawLines ($ ('. Line-min '), 60,85); DrawLines ($ ('. Line-hour '), 12,80); Drawnumbers ($ ('. Number '));            Move ();            } init (); //draw a clock tick line            //parent container for @param wrap tick marks            //total number of tick marks @param            //@param translateX The offset of the tick marks in the x-axis direction            functionDrawLines (Wrap,total,translatex) {varGap = 360/total;varstrHTML = "";  for(vari=0;i<total;i++) {strhtml+ = ' <li style= ' transform:rotate (' + (i*gap) + ' deg) translate (' +translatex+ ' px,-50%) ' ></li> ';            } wrap.html (strHTML); }            //draw a clock number            //parent container for @param wrap numbers            functiondrawnumbers (Wrap) {varRadius = Wrap.width ()/2; varstrhtml = ' ';  for(vari=1;i<=12;i++){                    varMyAngle = (i-3)/6 * MATH.PI;varMYX = radius + radius*math.cos (myangle),//x= r+rcos (0)MyY = radius + radius*math.sin (myangle);//y= r+rsin (0)strHTML + = ' <li style= "left: ' + myx + ' px; Top: ' +myy + ' px ' > ' +i + ' </li> ';            } wrap.html (strHTML); }            //Watch the clock move, turn the second hand, Minute hand, hour hand            functionMove () {//Get Pointer                varDomhour = $ ('. Hour ')), Dommin= $ ('. Min ')), Domsec= $ ('. Sec ')); SetInterval (function(){                    varnow =NewDate (), hour=now.gethours (), Min=now.getminutes (), Sec=now.getseconds (); varSecangle = sec*6-90, Minangle= Min*6 + sec*0.1-90, Hourangle= hour*30 + min*0.5-90; Domsec.css (' Transform ', ' rotate (' +secangle+ ' deg) '); Dommin.css (' Transform ', ' rotate (' +minangle+ ' deg) '); Domhour.css (' Transform ', ' rotate (' +hourangle+ ' deg) '); Document.title= Hour + ': ' + min + ': ' +sec; },1000); }        })    </script></body>
CSS3 Simple Clock