一、全部源码仓库
https://github.com/wesbos/JavaScript30.git
二、全部视频教程链接
https://courses.wesbos.com/account/access/62d7de4388db94aff3fd1ee3/view/194130581
三、元素快速垂直居中方法
body {
display: flex;
margin: 0;
}
html, body{
width: 100%;
height: 100%;
}
居中元素{
margin: auto;
}
四、实现效果
五、html
<div class="clock">
<div class="clock-face">
<div class="hour hand"></div>
<div class="mins hand"></div>
<div class="second hand"></div>
</div>
</div>
六、CSS
html{
background: aquamarine url(https://unsplash.it/1500/1000?image=881&blur=5);
background-size: cover;
}
body {
display: flex;
margin: 0;
}
html, body{
width: 100%;
height: 100%;
}
.clock{
width: 30rem;
height: 30rem;
border: 20px solid white;
border-radius: 50%;
box-shadow:
0 0 0 4px rgba(0,0,0,0.1),
inset 0 0 0 3px #EFEFEF,
inset 0 0 10px black,
0 0 10px rgba(0,0,0,0.2);
margin: auto;
padding: 2rem;
}
.clock-face{
border-radius: 50%;
width: 100%;
height: 100%;
position: relative;
}
.hand{
width: 50%;
height: 0.375rem;
background-color: black;
position: absolute;
top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.05s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);/* 这行有没有,秒针最明显*/
}
七、JS
const hourHand = document.querySelector('.hour');
const minsHand = document.querySelector('.mins');
const secondHand = document.querySelector('.second');
function setDate() {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
console.log(secondsDegrees);
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
const hour = now.getHours();
const hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(setDate, 1000);
setDate();