<style>
*{margin: 0; padding: 0;}
html,body{width: 100%; height: 100%;}
.box{
width: 600px;
height: 600px;
margin: 50px auto;
background-image: url(img/clock.jpg);
position: relative;
}
img{
position: absolute;
margin-left: 50%;
left: -15px;
}
</style>
</head>
<body>
<div class="box">
<img src="img/hour.png" alt="" id="img1">
<img src="img/minute.png" alt="" id="img2">
<img src="img/second.png" alt="" id="img3">
</div>
<script>
//通过简单封装获取元素
function $(id){
return document.querySelector(id)
}
var img1 = $("#img1")
var img2 = $("#img2")
var img3 = $("#img3")
function run(){
//获取现在的时间
var dd = new Date;
//获取现在时分秒
var h = dd.getHours();
var m = dd.getMinutes();
var s = dd.getSeconds();
//获取毫秒
var ss = dd.getMilliseconds()/1000;
//获取时钟的度数,然后进行赋值
//秒钟一次6度
img3.style.transform = "rotate("+(s+ss)*6+"deg)";
//分针一次也是60度
img2.style.transform = "rotate("+(m+s/60)*6+"deg)";
//时钟一次是30度
img1.style.transform = "rotate("+(h+m/60)*30+"deg)";
}
run()
setInterval(run,10)
</script>
1806
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
