html部分
<div class="clock">
<div class="panel">
<div class="circle"></div>
<div class="secend hand"></div>
<div class="minute hand"></div>
<div class="hour hand"></div>
<div class="pan"></div>
<div class="dial-container">
<div class="dial"></div>
<div class="dial"></div>
<div class="dial"></div>
<div class="dial"></div>
<div class="dial"></div>
<div class="dial"></div>
</div>
</div>
</div>
css部分
body {
margin: 0;
padding: 0;
background-image: url(background.jpg);
}
.clock {
width: 400px;
height: 400px;
border: 1px solid red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
.panel {
width: 400px;
height: 400px;
box-sizing: border-box;
background-color: rgb(241, 241, 241);
border-radius: 50%;
border: 20px solid white;
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)
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -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);
z-index: 20;
}
.hand {
width: 5px;
position: absolute;
left: calc(50% - 2.5px);
background-color: #3f3f3f;
transform-origin: center bottom;
border-radius: 2.5px 2.5px 0 0;
z-index: 3;
}
.secend {
top: 40px;
height: 160px;
background-color: red;
z-index: 8;
transition: transform 0.5s cubic-bezier(0.29, 1.61, 0.02, 0.98);
}
.minute {
top: 80px;
height: 120px;
z-index: 7;
}
.hour {
top: 120px;
height: 80px;
z-index: 6;
}
.pan {
width: 320px;
height: 320px;
border-radius: 50%;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: rgb(241, 241, 241);
z-index: 2;
}
.dial-container {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 0;
}
.dial {
width: 4px;
height: 350px;
background-color: rgb(75, 75, 75);
position: absolute;
top: 25px;
left: calc(50% - 2px);
z-index: 1;
}
.dial:nth-child(2) {
transform: rotate(30deg)
}
.dial:nth-child(3) {
transform: rotate(60deg)
}
.dial:nth-child(4) {
transform: rotate(90deg)
}
.dial:nth-child(5) {
transform: rotate(120deg)
}
.dial:nth-child(6) {
transform: rotate(150deg)
}
JavaScript部分
<script>
onload = function () {
let sHand = document.querySelector('.secend');
let mHand = document.querySelector('.minute');
let hHand = document.querySelector('.hour');
let hands = document.querySelectorAll('.hand');
//根据date对象设置dom时钟
function setClock(date) {
let h = date.getHours();
//由于美秒都要判断,所有没让定义h的时候就用三目运算
h = h>12 ? h - 12 : h;
let m = date.getMinutes();
let s = date.getSeconds();
sDeg = 6 * s;
mDeg = 6 * (m + s / 60) ;
hDeg = 30 * (h + m / 60);
if(s == 0 ){
console.log('set transiton 0')
sHand.style.transitionDuration = "0s";
}else{
sHand.style.transitionDuration = "0.5s";
}
sHand.style.transform = `rotate(${sDeg}deg)`;
mHand.style.transform = `rotate(${mDeg}deg)`;
hHand.style.transform = `rotate(${hDeg}deg)`
};
//初始化指针时候的过渡动画
function initHand(date) {
setClock(date);
for (let i = 0; i < hands.length; i++) {
hands[i].style.transition = "transform 1s linear";
setTimeout(function(){
hands[i].style.transition = null
},1000);
}
}
// 启动始终
function startClock() {
let now = new Date();
initHand(now);
setInterval(function () {
let now = new Date();
setClock(now)
}, 1000)
}
//启动函数
startClock();
}
</script>