Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<TITLE>JS Realization Clock </title>
<style>
. Clock {
width:600px;
height:600px;
margin:50px Auto;
Background:url (images/clock.jpg) no-repeat;
position:relative;
}
. Clock div {
width:100%;
height:100%;
Position:absolute;
top:0;
left:0;
}
. h {
Background:url (images/hour.png) No-repeat Center Center;
}
. m {
Background:url (images/minute.png) No-repeat Center Center;
}
. s {
Background:url (images/second.png) No-repeat Center Center;
}
</style>
<body>
<div class= "Clock" id= "clock" >
<div class= "H" id= "H" ></div>
<div class= "M" id= "M" ></div>
<div class= "S" id= "s" ></div>
</div>
</body>
<script>
Window.onload=function () {
function $ (ID) {
return document.getElementById (ID);
}
var clock=$ (' clock ');
var hour=$ (' H ');
var minute=$ (' m ');
var second=$ (' s ');
var s=0,m=0,h=0,ms=0;
function fn () {
var date=new date ();//Get the latest time
Ms=date.getmilliseconds ();//Gets the number of milliseconds
Console.log (MS);
S=date.getseconds () +ms/1000;//gets the number of seconds
M=date.getminutes () +s/60;//get fractions such as 40.5M
H=date.gethours ()%12+m/60;//get hours such as 5.5H
Rotation angle
Second.style.webkitTransform = ' rotate (' + S * 6 + ' deg) ';
Minute.style.webkitTransform = ' rotate (' + M * 6 + ' deg) ';
Hour.style.webkitTransform = ' rotate (' + H * + ' deg) ';
}
FN ();
SetInterval (fn,1000);
}
</script>
JS for clock effects
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
