Css3 + Js pretty clock
The browser supports IE9, GoogleChrome, FireFox, and Safari.
:
HTML code
<! DOCTYPE html>
<Html>
<Head>
<Meta>
<Title> css3 + js creates a beautiful clock </title>
<Style>
Body {background:-webkit-radial-gradient (center, circle, #666, #000); margin: 0 ;}
Div {margin: 0; padding: 0 ;}
. Box {padding-top: 50px; width: margin PX; margin: 0 auto ;}
. Clock {position: relative; width: 400px; height: 400px; border: 5px solid # fff; border-radius: 200px; background:-webkit-radial-gradient (center, circle, # fff, # bbb); box-shadow: 1px 1px 30px rgba (0, 0, 0, 0.8 );}
. Clock. clock-xin {position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; border-radius: 15px; background: # eee; margin: -15px 0 0-15px ;}
. Clock. clock-xin2 {position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; border-radius: 6px; background: # f00; z-index: 100; margin:-6px 0 0-6px ;}
. Clock. date {position: absolute; z-index: 3; top: 245px; left: 130px; font-size: 20px; color: #000; text-shadow: 1px 1px white ;}
. Clock. hour {position: absolute; z-index: 3; top: 50%; left: 50%; width: 160px; height: 6px; border-radius: 5px; background: #000; -webkit-transform-origin: 10px 50%; margin:-3px 0 0-10px ;}
. Clock. min {position: absolute; z-index: 4; top: 50%; left: 50%; width: 180px; height: 4px; border-radius: 5px; background: #333; -webkit-transform-origin: 10px 50%; margin:-2px 0 0-10px ;}
. Clock. sec {position: absolute; z-index: 5; top: 50%; left: 50%; width: 210px; height: 2px; background: # f00;-webkit-transform-origin: 30px 50%; margin:-1px 0 0-30px ;}
. Clock em {display: block; width: 2px; height: 5px; background: #000; position: absolute; top: 0; left: 0;-webkit-transform-origin: 50% 0; margin-left:-1px ;}
. Clock em. ishour {width: 6px; height: 10px; margin-left:-3px ;}
. Clock em. ishour I {font-size: 25px; color: #000; position: absolute; top: 12px; left:-7px; text-shadow: 1px 1px white ;}
</Style>
</Head>
<Body>
<Div style = "color: white;"> browser support: GoogleChrome </div>
<Div class = "box">
<Div class = "clock" id = "clock">
<Div class = "clock-xin"> </div>
<Div class = "clock-xin2"> </div>
<Div id = "date" class = "date"> </div>
<Div id = "hour" class = "hour"> </div>
<Div id = "min" class = "min"> </div>
<Div id = "sec" class = "sec"> </div>
</Div>
</Div>
<Script>
Window. onload = function (){
Var winHeight = document.doc umentElement. clientHeight;
Document. getElementsByTagName ('body') [0]. style. height = winHeight + 'px ';
Var $ clock = document. getElementById ('clock '),
$ Date = document. getElementById ('date '),
$ Hour = document. getElementById ('hour '),
$ Min = document. getElementById ('Min '),
$ Sec = document. getElementById ('sec '),
OSecs = document. createElement ('em ');
For (var I = 1; I <61; I ++ ){
Var tempSecs = oSecs. cloneNode (),
Pos = getSecPos (I );
If (I % 5 = 0 ){
TempSecs. className = 'ishour ';
TempSecs. innerHTML = '<I style = "-webkit-transform: rotate (' + (-I * 6) + 'deg);"> '+ (I/5) + '</I> ';
}
TempSecs.style.css Text = 'left: '+ pos. x + 'px; top: '+ pos. y + 'px;-webkit-transform: rotate ('+ I * 6 + 'deg );';
$ Clock. appendChild (tempSecs );
}
// Coordinate conversion on the arc
Function getSecPos (dep ){
Var hudu = (2 * Math. PI/360) * 6 * dep,
R = 200; // radius
Return {
X: Math. floor (r + Math. sin (hudu) * r ),
Y: Math. floor (r-Math. cos (hudu) * r ),
}
}
; (Function (){
// Current time
Var _ now = new Date (),
_ H = _ now. getHours (),
_ M = _ now. getMinutes (),
_ S = _ now. getSeconds ();
Var _ day = _ now. getDay ();
_ Day = (_ day = 0 )? 7: _ day;
If (_ day = 1 ){
_ Day = "1 ";
} Else if (_ day = 2 ){
_ Day = "2 ";
} Else if (_ day = 3 ){
_ Day = "3 ";
} Else if (_ day = 4 ){
_ Day = "4 ";
} Else if (_ day = 5 ){
_ Day = "5 ";
} Else if (_ day = 6 ){
_ Day = "6 ";
} Else if (_ day = 7 ){
_ Day = "day ";
}
$ Date. innerHTML = _ now. getFullYear () + '-' + (_ now. getMonth () + 1) + '-' + _ now. getDate () + 'Week' + _ day;
// Draw the clock
Var gotime = function (){
Var _ h_dep = 0;
_ S ++;
If (_ s> 59 ){
_ S = 0;
_ M ++;
}
If (_ m> 59 ){
_ M = 0;
_ H ++;
}
If (_ h> 12 ){
_ H = _ h-12;
}
// Clockwise offset distance
_ H_dep = Math. floor (_ m/12) * 6;
Export hour.style.css Text = '-webkit-transform: rotate (' + (_ h * 30-90 + _ h_dep) + 'deg );';
Export min.style.css Text = '-webkit-transform: rotate (' + (_ m * 6-90) + 'deg );';
Eclipsec.style.css Text = '-webkit-transform: rotate (' + (_ s * 6-90) + 'deg );';
};
Gotime ();
SetInterval (gotime, 1000 );
})();
};
</Script>
</Body>
</Html>