Clock made by JavaScript
Share a clock made by yourself. It's a low-level version. The seconds and minutes clock can get the time and move according to the time. Is dynamic.
The renderings are as follows:
Before making, you must first draw the various parts of the clock, then add the style, and finally write the code. The clock face and the background picture will look better!
Js code in seconds is easier to write, just divide 360 degrees into 60 parts and move a 6-degree angle every second.
The minute becomes the time of the minute plus the time of the second, and then move the angle of 6 degrees every minute.
The clock becomes the time of the hour plus the time of the minute, and then it moves 30 degrees every hour.
Not much to say, just go to the code:
<!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>