<!doctype html>
<html>
<head>
<meta charset="utf8">
<title>js时钟</title>
<style>
* {margin: 0px; padding: 0;}
.wrap {
width: 600px;
height: 600px;
background: red;
margin: 0 auto;
border-radius: 50%;
position: absolute;
left: 200px;
}
#h {
width: 300px;
height: 20px;
background: #000;
position: absolute;
left: 50%;
top: 290px;
border-radius: 20%;
transform-origin: 0 50% 0;
}
#m {
width: 300px;
height: 20px;
background: green;
position: absolute;
left: 50%;
top: 290px;
border-radius: 30%;
transform-origin: 0 50% 0;
}
#s {
width: 300px;
height: 20px;
background: blue;
position: absolute;
left: 50%;
top: 290px;
border-radius: 50%;
transform-origin: 0 50% 0;
}
</style>
<script>
window.onload = function () {
var time = 0;
var h=0,m=0,s=0;
var hID = document.getElementById("h");//得到时针id
var mID = document.getElementById("m");//得到分针id
var sID = document.getElementById("s");//得到秒针id
//设置开启定时器
time = setInterval(move,1000);
//定义函数
function move() {
var myDate=new Date();
h=myDate.getHours();
m=myDate.getMinutes();
s=myDate.getSeconds();
console.log(h%12);
console.log(m);
hID.style.transform = "rotate(" + (h * 30 - 90) + "deg)";
mID.style.transform = "rotate(" + (m * 6 - 90) + "deg)";
sID.style.transform = "rotate(" + (s * 6 - 90) + "deg)";
}
}
</script>
</head>
<body>
<div class="wrap">
<div id="h"></div>
<div id="m"></div>
<div id="s"></div>
</div>
</body>
</html>js时钟
猜你喜欢
转载自blog.csdn.net/qq_42058441/article/details/85317974
今日推荐
周排行