It is good to see a clock:
<! DOCTYPE>
<Html lang = "en" id = "paulrhayes-com" class = "js wf-swingdancer1swingdancer2-n5-active wf-active">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Link rel = "stylesheet" href = "css/experiment.css" type = "text/css">
<Link rel = "stylesheet" href = "css/experiment.css" type = "text/css">
<! -- [If lt IE 9]> <script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <! [Endif] -->
<Style type = "text/css">
Body. experiment {
Background: # fff;
}
. Start {
Text-align: center;
Font-size: 2em;
Font-weight: bold;
Margin: 5em;
}
# Clock {
Position: relative;
Width: pixel PX;
Height: pixel PX;
Background-image: url ('HTTP: // pic002.cnblogs.com/images/2012/385052/2012031316573623.png ');
Left: 50%;
Margin: 5em 0 0-189px;
}
# Clock div {
Position: absolute;
}
</Style>
</Head>
<Body class = "experiment">
<Div id = "wrapper">
<Header id = "header">
<Aside class = "tweetThis">
<A href = "http://www.cnblogs.com/wangyunbing/" class = "twitter-share-button" data-text = "CSS3 Analogue Clock" data-count = "horizontal" data-via = "fofr"> dripping water into soldiers </a>
</Aside>
</Header>
<Div id = "experiment">
<Div id = "clock">
<Div id = "hour"> </div>
<Div id = "minute"> </div>
<Div id = "second"> </div>
</Div>
</Div>
</Div>
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> <script type = "text/javascript">
$ (Function (){
Var props = 'transform WebkitTransform implements transform OTransform msTransform '. split (''),
Prop,
El = document. createElement ('div ');
For (var I = 0, l = props. length; I <l; I ++ ){
If (typeof el. style [props [I]! = "Undefined "){
Prop = props [I];
Break;
}
}
StartClock ();
SetInterval (function () {startClock () ;}, 1000)
Function startClock (){
Var angle = 360/60,
Date = new Date (),
Hour = (function (){
Var h = date. getHours ();
If (h> 12 ){
H = h-12;
}
Return h
})(),
Minute = date. getMinutes (),
Second = date. getSeconds (),
HourAngle = (360/12) * hour + (360/(12*60) * minute;
If (prop ){
$ ('# Minute') [0]. style [prop] = 'rotate ('+ angle * minute + 'deg )';
$ ('# Second') [0]. style [prop] = 'rotate (' + angle * second + 'deg )';
$ ('# Hour') [0]. style [prop] = 'rotate (' + hourAngle + 'deg )';
}
}
Document. title = date
});
</Script>
</Body>
</Html>
Excerpted from dripping water
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
