<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#yuan{
width: 300px;
height: 300px;
border: 4px solid blue;
border-radius: 100%;
margin-top: 50px;
margin-left:100px;
}
img{
border-radius:100%;
}
#shi{
width: 5px;
height: 130px;
background:yellow；
transform: rotate(0deg);
transform-origin: 100% 100%;
position: absolute;
top:72px;
left: 250px;
}
#fen{
width: 5px;
height: 140px;
background:green;
transform: rotate(0deg);
transform-origin: 100% 100%;
position: absolute;
top:60px;
left: 250px;
}
#miao{
width: 5px;
height: 150px;
background:blue;
transform: rotate(0deg);
transform-origin: 100% 100%;
position: absolute;
top:55px;
left: 250px;
}
</style>
</head>
<body>
<div id="yuan">
<img src="时钟表盘.jpg" width="300" height="300">
<div id="shi"></div>
<div id="fen"></div>
<div id="miao"></div>
</div>
<div id="abc"></div>
<script type="text/javascript">
//显示日期时间function distime(){
var now1=new Date();
document.getElementById('abc').innerHTML=(now1.getFullYear()+'年'+(now1.getMonth()+1)+'月'+now1.getDate()+'日'+now1.getHours()+'时'+now1.getMinutes()+'分'+now1.getSeconds()+'秒');
}
setInterval("distime()",1000);
//时钟
function shizhong(){
//时针
var now=new Date();
var shiZ=now.getHours();
if (shiZ>12) {
shiZ=shiZ-12;
}
shiZ=shiZ*30+now.getMinutes()*0.6;
document.getElementById('shi').style.transform="rotate"+"("+shiZ+"deg)";
//分针
var fenZ=now.getMinutes();
var fenZ=fenZ*6;
document.getElementById('fen').style.transform="rotate"+"("+fenZ+"deg)";
//秒针
var miaoZ=now.getSeconds();
var miaoZ=miaoZ*6;
document.getElementById('miao').style.transform="rotate"+"("+miaoZ+"deg)";
}
setInterval("shizhong()",1000);
</script>
</body>
</html>
