JavaScript制作的时钟
分享一个自己制作的时钟。算是低级版的吧，秒钟分钟时钟都是可以获取到时间，根据时间来动的。是动态的。
效果图如下：
制作之前肯定要先把钟的各个部件画出来，然后加上样式，最后再写上代码。钟面加上背景图会更好看哦！
秒钟的js代码比较好写，就把360度分成60份，每秒动一个6度角即可。
分钟就变成分的时间加上秒的时间，再每分钟动6度角即可。
时钟就变成时的时间加上分的时间，再每小时动30度角即可。
话不多说，直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时钟</title>
<style>
#box{
width: 200px;
height: 400px;
margin: 50px auto;
text-align: center;
position: relative;
}
.round{
width: 200px;
height: 200px;
border: 1px solid #000;
border-radius: 50%;
background-image: url("image/3.jpg");
background-size: 210px 210px;
background-position: -5px -5px;
}
.min{
width: 3px;
height: 80px;
background-color: rgb(223, 241, 56);
position: absolute;
left: 100px;
top: 20px;
border-radius: 50% 50% 10% 10%;
transform-origin: bottom;
z-index: 97;
}
.second{
width: 4px;
height: 60px;
background-color: rgb(77, 228, 31);
position: absolute;
left: 100px;
top: 40px;
border-radius: 50% 50% 10% 10%;
transform-origin: bottom;
transform: rotateZ(0deg);
z-index: 98;
}
.clock{
width: 6px;
height: 40px;
background-color: rgb(250, 9, 238);
position: absolute;
left: 100px;
top: 60px;
border-radius: 50% 50% 10% 10%;
transform-origin: bottom;
z-index: 99;
}
.one{
position: absolute;
left: 135px;
top: 25px;
}
.two{
position: absolute;
left: 165px;
top: 50px;
}
.three{
position: absolute;
left: 180px;
top: 90px;
}
.four{
position: absolute;
left: 165px;
top: 130px;
}
.five{
position: absolute;
left: 135px;
top: 160px;
}
.six{
position: absolute;
left: 96px;
top: 170px;
}
.seven{
position: absolute;
left: 55px;
top: 160px;
}
.eight{
position: absolute;
left: 30px;
top: 130px;
}
.nine{
position: absolute;
left: 10px;
top: 90px;
}
.ten{
position: absolute;
left: 25px;
top: 50px;
}
.eleven{
position: absolute;
left: 50px;
top: 20px;
}
.twelve{
position: absolute;
left: 90px;
top: 10px;
}
#point{
width: 200px;
height: 50px;
margin: 20px auto;
background-color: rgba(175, 250, 246, 0.781);
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="box">
<div class="round"></div>
<div class="min needle"></div>
<div class="second needle"></div>
<div class="clock needle"></div>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
<div class="seven">7</div>
<div class="eight">8</div>
<div class="nine">9</div>
<div class="ten">10</div>
<div class="eleven">11</div>
<div class="twelve">12</div>
<div id="point"></div>
</div>
<script>
let point = document.getElementById("point"),
needle =document.querySelectorAll("#box .needle"),
time;
//开启定时器
let rotamin = window.setInterval(function(){
clockcompute();
},1000);
//获取时间
function clockcompute(){
time = new Date();
let p_m = time.getSeconds(),
p_s = time.getMinutes(),
p_c = time.getHours(),
time_data = time.toLocaleDateString() +" "+ p_c + "时"+p_s+ "分"+p_m +"秒";
point.innerHTML = time_data;
min_needle(p_m,p_s,p_c);
}
//针的移动
function min_needle(x,y,z){
needle[0].style.transform = "rotateZ("+ x*6 +"deg)";
needle[1].style.transform = "rotateZ("+ (y+x/60) *6 +"deg)";
needle[2].style.transform = " rotateZ("+ (((z+y/60)%12)*30) +"deg)";
}
</script>
</body>
</html>