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

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

效果：

代码： 

 
<script setup>
import {onMounted, computed} from 'vue';
 
let timer = null
 
const 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>