简单时钟实现（vue3）

// 父组件
  <Clock width=300 height=300></Clock>



<div class='myClock' :style="{ width: width + 'px', height: height + 'px' }">
    <div id="num" class="num"></div>
    <ul id="scale">
    </ul>
    <div id="hour"></div>
    <div id="min"></div>
    <div id="second"></div>
    <div id="ball"></div>
 </div>



const props = defineProps({
  width: {
    type: String,
    default: 300
  },
  height: {
    type: String,
    default: 300
  }
})


let timer = null
// 12~11时间函数
function timeNum() {
  const num = document.querySelector('#num') as HTMLElement

  let arr = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
  for (let i = 0; i < 12; i++) {
    const li = document.createElement('div');
    li.innerHTML = `${arr[i]}`;
    const t = (Math.PI / 180) * 30
    console.log(Number(props.width + 40) / 2);
    let x = Math.sin(i * t) * (Number(props.width) + 40) / 2
    let y = -Math.cos(i * t) * (Number(props.width) + 40) / 2
    console.log(y);
    li.style.transform = `translate(${x - 10}px,${y - 10}px)`
    num.appendChild(li)

  }
}

onMounted(() => {

  const scale = document.querySelector('#scale') as HTMLElement
  const hour = document.querySelector('#hour') as HTMLElement
  const min = document.querySelector('#min') as HTMLElement
  const second = document.querySelector('#second') as HTMLElement
  scale.style.setProperty('--width', Math.floor(Number(props.width) / 2) + 'px')


  timeNum()

  for (let i = 0; i < 60; i++) {
    const li = document.createElement('li');
    li.style.transform = `rotate(${i * 6}deg)`;
    if (i % 5 === 0) {
      li.style.height = '15px';
    }
    scale?.appendChild(li);
  }
  function run() {
    const data = new Date()
    const h = data.getHours()
    const m = data.getMinutes()
    const s = data.getSeconds()

    hour.style.transform = `rotate(${(h + data.getMinutes() / 60) * 30}deg)`
    min.style.transform = `rotate(${m * 6}deg)`
    second.style.transform = `rotate(${s * 6}deg)`

  }
  run()

  timer = setInterval(run, 1000)

})
onUnmounted(() => {
  timer = null
})



<style scope lang="scss">
.myClock {
  position: relative;
  margin: 100px auto;
  border-radius: 50%;
  border: 5px solid #000;
}

ul {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
  position: absolute;
  left: 49.6%;
  top: 0;
  height: 8px;
  background-color: #000;
  width: 2px;
  transform-origin: center var(--width);
}

.num {
  position: absolute;
  left: 50%;
  top: 50%;

  div {
    position: absolute;
  }
}

#hour,
#min,
#second {
  position: absolute;
  background-color: #000;
  left: 50%;
  top: 50%;
  transform-origin: center bottom;
}

#hour {
  height: 50px;
  width: 5px;
  margin: -50px 0 0 -2.5px;

}

#min {
  height: 70px;
  width: 4px;
  margin: -70px 0 0 -2px;
}

#second {
  height: 90px;
  width: 3px;
  margin: -90px 0 0 -1.5px;

}

#ball {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: #000;
  top: 50%;
  left: 50%;

  border-radius: 50%;
}
</style>