当前位置：首页 > VUE

vue实现钟表

2026-01-07 07:12:23VUE

使用 Vue 实现动态钟表

以下是一个基于 Vue 3 的动态钟表实现方案，包含时分秒指针和数字时间显示。

模板部分

<template>
  <div class="clock-container">
    <div class="analog-clock">
      <div class="clock-face">
        <div class="hour-hand" :style="{ transform: `rotate(${hourRotation}deg)` }"></div>
        <div class="minute-hand" :style="{ transform: `rotate(${minuteRotation}deg)` }"></div>
        <div class="second-hand" :style="{ transform: `rotate(${secondRotation}deg)` }"></div>
      </div>
    </div>
    <div class="digital-clock">
      {{ formattedTime }}
    </div>
  </div>
</template>

脚本部分

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const hourRotation = ref(0);
    const minuteRotation = ref(0);
    const secondRotation = ref(0);
    const formattedTime = ref('');

    const updateClock = () => {
      const now = new Date();
      const hours = now.getHours() % 12;
      const minutes = now.getMinutes();
      const seconds = now.getSeconds();

      hourRotation.value = (hours * 30) + (minutes * 0.5);
      minuteRotation.value = minutes * 6;
      secondRotation.value = seconds * 6;

      formattedTime.value = now.toLocaleTimeString();
    };

    let intervalId;
    onMounted(() => {
      updateClock();
      intervalId = setInterval(updateClock, 1000);
    });

    onBeforeUnmount(() => {
      clearInterval(intervalId);
    });

    return {
      hourRotation,
      minuteRotation,
      secondRotation,
      formattedTime
    };
  }
};
</script>

样式部分

<style scoped>
.clock-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.analog-clock {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  background: #f5f5f5;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.clock-face {
  width: 100%;
  height: 100%;
  position: relative;
}

.hour-hand, .minute-hand, .second-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
}

.hour-hand {
  width: 6px;
  height: 50px;
  background: #333;
  margin-left: -3px;
}

.minute-hand {
  width: 4px;
  height: 70px;
  background: #666;
  margin-left: -2px;
}

.second-hand {
  width: 2px;
  height: 80px;
  background: red;
  margin-left: -1px;
}

.digital-clock {
  margin-top: 20px;
  font-size: 24px;
  font-family: monospace;
}
</style>

实现原理

使用 Vue 的响应式系统（ref）来管理指针旋转角度和时间显示
通过 setInterval 每秒更新一次时间数据
计算指针旋转角度：
- 时针每小时旋转30度（360°/12小时），每分钟额外旋转0.5度
- 分针每分钟旋转6度（360°/60分钟）
- 秒针每秒旋转6度（360°/60秒）
使用 transform 和 transform-origin 属性实现指针旋转效果
添加组件生命周期钩子确保定时器正确清理