Today's renderings are as follows:
This effect is to use JS and CSS to make a simple clock. Don't say much. Let's start directly~
We can divide the content into two parts: JS and CSS. JS is responsible for realizing the effect of dynamic pointer rotation, and CSS is responsible for realizing the static clock style.
CSS section
The initial state is as follows:
As we can see, we need to draw a circle and nest the pointer box in it.
In fact, it is very simple. First, set the border radius of the container div box to 50% to achieve the ring effect; Then nest three small pointer boxes with half the width of the large box, set the positioning position: absolute and top: 50%, and then use transform: rotate(90deg) to rotate them 90 degrees to reach the 12 o'clock direction. (or directly set left: 50% to this position)
JS part
The main effects we need to make here are: (1) the rotation of the pointer with time (2) the Pause effect of the pointer rotation process
First point: we need to use new Date() to create a Date object, call getSeconds() and getMinutes() to get the hour, minute and second of the current time, and then examine your mathematical ability!!! - > According to the obtained seconds, obtain the number of degrees the pointer should rotate. Finally, set the transform of the pointer box to rotate (the degree deg you get)~
The second point: the practical part here is CSS. How to make the pointer rotate one by one? We need to understand the transition timing function. In this property, we can set how the pointer changes during rotation, that is, call the cubic Bezier function and pass in relevant parameters.
For the cubic Bezier function, you can go to the following website to learn about it, which will be very helpful to your understanding: cubic-bezier
Well, a brief summary:
After that, you will find that there are no difficulties. When we set the static layout, we just need to use our mathematical knowledge to convert the obtained fractions and seconds into the degree of pointer rotation and pass them into the rotate function. Then we can understand how the pointer can achieve the effect of one meal after another by understanding the cubic Bezier function The fruit is finished
The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
background-image: url(../img/black.jpg);
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 300px;
height: 300px;
border: 13px solid white;
border-radius: 50%;
padding: 16px;
box-shadow:
0 0 10px rgba(0, 0, 0, .3),
0 0 0 4px rgba(0, 0, 0, .3),
inset 0 0 10px #efefef,
inset 0 0 0 4px #efefef;
position: relative;
}
.nav {
height: 100%;
width: 100%;
position: relative;
}
.hand {
width: 50%;
height: 11px;
background-color: #efefef;
position: absolute;
top: 50%;
transform-origin: 100%;
/* Which point is the origin of the transformation */
transform: rotate(90deg);
transition: all 0.1s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
/* In and out of the animation effect, Bessel curve can be seen https://cubic-bezier.com */
}
.two{
width: 45%;
left:15px;
}
.three{
width: 40%;
left:30px;
}
</style>
</head>
<body>
<div class="box">
<div class="nav">
<div class="hand one"></div>
<div class="hand two"></div>
<div class="hand three"></div>
</div>
</div>
<script>
let one = document.querySelector(".one");
let two = document.querySelector(".two");
let three = document.querySelector(".three");
function time() {
let now = new Date();
let second = now.getSeconds();
let minute = now.getMinutes();
let hour = now.getHours();
console.log(second, minute, hour);
one.style.transform=`rotate(${second*6+90}deg)`
two.style.transform=`rotate(${minute*6+second*6/60+90}deg)`
three.style.transform=`rotate(${hour*30+minute*30/60+90}deg)`
}
setInterval(() => {
time();
}, 1000);
time();
</script>
</body>
</html>