JS Clock Clocks

<! DOCTYPE html>

<meta charset= "Utf-8"/>
<title></title>
<style>


. clock{
width:600px;
height:600px;
Background:url (images/clock.jpg) no-repeat;
margin:50px Auto;
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" >
<div class= "H" id= "Hour" ></div>
<div class= "M" id= "minute" ></div>
<div class= "s" id= "second" ></div>
</div>

<script>
var hour = document.getElementById ("Hour");
var minute = document.getElementById ("minute");
var second = document.getElementById ("second");

Turn on timer
var s = 0;
var m = 0, h = 0, ms = 0;

Start timer
SetInterval (function () {
Write the corresponding time and content

Get the latest time
var date = new Date ();

Get the corresponding time division
ms = Date.getmilliseconds (); Number of milliseconds now
Get the number of seconds
s = date.getseconds () + ms/1000;
Get the current minute.
m = date.getminutes () + s/60;
Get the hour.
h = date.gethours ()% + m/60;

Console.log (h);

Calculate the angle of rotation
One lap, 360 degrees, 60 seconds per second, and now almost all seconds.

Second.style.webkitTransform = "Rotate (" + s*6 + "deg)";
Minute.style.webkitTransform = "Rotate (" + m*6 + "deg)";
Hour.style.webkitTransform = "Rotate (" + h*30 + "deg)";


Second.style.MozTransform = "Rotate (" + s*6 + "deg)";
Minute.style.MozTransform = "Rotate (" + m*6 + "deg)";
Hour.style.MozTransform = "Rotate (" + h*30 + "deg)";

Second.style.MozTransform
Change rotation deg Degree


},100);
</script>
</body>

JS Clock Clocks