画一个时钟（html+css+js）

这是一个很简约的时钟。。。。。。。

效果：

代码： 

<template><div class="demo-box"><div class="clock"><ul class="mark"><liv-for="(rotate, index) in rotatedAngles":key="index":class="{ 'bold': index % 5 === 0 }":style="{ transform: `translateY(90px) rotate(${rotate}deg)` }"></li></ul><div id="min"></div><div id="hour"></div><div id="sec"></div></div></div>
</template><script setup>
import {onMounted, computed} from 'vue';let timer = nullconst rotatedAngles = computed(() => {return Array.from({length: 60}, (_, index) => index * 6);
})const startTime = () => {const min = document.getElementById('min')const sec = document.getElementById('sec')const hour = document.getElementById('hour')const now = new Date()const s = now.getSeconds()const then = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0)const diffInMil = now.getTime() - then.getTime()const h = diffInMil / (1000 * 60 * 60)const m = h * 60;if (hour || min || sec) {hour.style.transform = `rotate(${h * 30}deg)`;min.style.transform = `rotate(${m * 6}deg)`;sec.style.transform = `rotate(${s * 6}deg)`;}
}onMounted(() => {startTime()timer = setInterval(() => {setTimeout(startTime, 0)}, 1000)
})</script><style scoped lang="scss">
.demo-box {width: 800px;margin: 100px auto;
}ul li {list-style: none;
}@mixin center {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
}.clock {width: 180px;height: 180px;position: relative;
}.mark {width: 180px;height: 180px;position: relative;
}//画刻度尺
.mark li {position: absolute;width: 6px;height: 2px;background: #666;border-radius: 1px;transform-origin: 90px;
}.mark li.bold {width: 12px;height: 4px;margin-top: -1px;background: #000;border-radius: 2px;
}#sec {//中心圆点@include center;background: #303030;width: 10px;height: 10px;border-radius: 50%;z-index: 3;&:before,&:after {display: block;content: "";position: absolute;}//秒针&:after {width: 2px;height: 4.4em;top: -4.3em;background: #303030;left: 0;right: 0;margin: 0 auto;border-radius: 1px;}
}#min,
#hour {@include center;z-index: 2;background: #303030;transform-origin: bottom center;
}//分针
#min {width: 4px;height: 4.2em;top: -4.2em;border-radius: 4px;
}//时针
#hour {width: 4px;height: 3em;top: -3em;border-radius: 4px;
}
</style>