<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
.clock{
width:400px;
height:400px;
margin:50px auto;
border:1px solid black;
background:url(C:/Users/高萍/Desktop/前端学习/images/clock.jpg) no-repeat center center;
background-size:cover;
position:relative;
}
.clock div{ /*时针分针和秒针都要在整个钟的正中间*/
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
.h{
background:url(C:/Users/高萍/Desktop/前端学习/images/hour.png) no-repeat center center;
}
.m{
background:url(C:/Users/高萍/Desktop/前端学习/images/minute.png) no-repeat center center;
}
.s{
background:url(C:/Users/高萍/Desktop/前端学习/images/second.png) no-repeat center center;
}
</style>
<script>
window.onload=function()
{
setInterval(fn,1000)
{ //每隔1秒执行一次fn函数
}
function fn()
{
var ms = 0, s = 0, m = 0, h = 0;
var date = new Date(); //获得当前时间
ms = date.getMilliseconds(); // 获得当前毫秒数
s = date.getSeconds() + ms / 1000; //秒数等于当前秒数加上已过去的秒数
m = date.getMinutes() + s / 60;//分钟等于当前分钟数加上已过去的分钟数
//console.log(m);
h = date.getHours()%12 + m / 60; //小时数等于当前小时数（12小时制）加上已经过去的小时数
console.log(h);
// s.style.webkitTransform="rotate("+s*6+"+deg)";
// m.style.webkitTransform="rotate("+m*6+"deg)";
// h.style.webkitTransform="rotate("+h*30+"deg)";
}
}
</script>
</head>
<body>
<div class="clock">
<div class="h"></div>
<div class="m"></div>
<div class="s"></div>
</div>
</body>
</html>
