简易时钟

这是我根据计时器做出来的一个简易时钟

首先是html代码

<div class="watch">
<span class="dot"></span>
<span id="second"></span>
<span id="minutse"></span>
<span id="hours"></span>
</div>

接下来是css代码

.watch {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
border-radius: 50%;

background: url(img/1.jpg) ;
background-size: 100% 100%;
}
.watch .dot {
position: absolute;
top: 97px;
left: 97px;
width: 6px;
height: 6px;
border-radius:50%;
background-color: #666;
}
#second {
position: absolute;
top: 10px;
left: 100px;
width: 1px;
height: 120px;
background-color: #ccc;
transform-origin: 1px 90px;

}
#minutse{
position: absolute;
top: 30px;
left: 100px;
width: 1px;
height: 100px;
background-color: #ccc;
transform-origin: 1px 70px;
}
#hours{
position: absolute;
top: 40px;
left: 100px;
width: 1px;
height: 90px;
background-color: #ccc;
transform-origin: 1px 60px;
}

接下来是最重要的js代码了

function clock(){
var d=new Date();//获取当前的时间
var s=d.getSeconds();//取出秒数
var m=d.getMinutes();//取出分
var h=d.getHours();//取出时
second.style.transform="rotate("+s*6+"deg)";
minutse.style.transform="rotate("+m*6+"deg)";
hours.style.transform="rotate("+h*30+"deg)";
//创建一个计时器
var timer=setInterval(
// clearInterval (timer)
function(){
var d=new Date();
var s=d.getSeconds();
var m=d.getMinutes();
var h=d.getHours();
second.style.transform="rotate("+s*6+"deg)";//每秒转6度
minutse.style.transform="rotate("+m*6+"deg)";//每分转6度
hours.style.transform="rotate("+h*30+"deg)"; //每小时转30度
},1000
)
}
clock();