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

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

效果：

代码：

<template>
  <div class="demo-box">
    <div class="clock">
      <ul class="mark">
        <li
            v-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 = 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>