当前位置：首页 > VUE

vue实现钟表效果

2026-03-10 12:37:10VUE

使用 Vue 实现钟表效果

创建 Vue 项目

确保已安装 Vue CLI，通过以下命令创建新项目：

vue create clock-app
cd clock-app

组件结构设计

在 src/components 目录下创建 Clock.vue 文件，包含模板、脚本和样式。

模板部分

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

脚本部分

<script>
export default {
  name: 'Clock',
  data() {
    return {
      hourRotation: 0,
      minuteRotation: 0,
      secondRotation: 0,
    };
  },
  mounted() {
    this.updateClock();
    setInterval(this.updateClock, 1000);
  },
  methods: {
    updateClock() {
      const now = new Date();
      const hours = now.getHours() % 12;
      const minutes = now.getMinutes();
      const seconds = now.getSeconds();

      this.hourRotation = (hours * 30) + (minutes * 0.5);
      this.minuteRotation = minutes * 6;
      this.secondRotation = seconds * 6;
    },
  },
};
</script>

样式部分

<style scoped>
.clock {
  width: 200px;
  height: 200px;
  border: 10px solid #333;
  border-radius: 50%;
  margin: 50px auto;
  position: relative;
}

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

.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  background: #333;
}

.hour-hand {
  width: 6px;
  height: 60px;
  margin-left: -3px;
}

.minute-hand {
  width: 4px;
  height: 80px;
  margin-left: -2px;
}

.second-hand {
  width: 2px;
  height: 90px;
  margin-left: -1px;
  background: red;
}
</style>

在主组件中使用

在 App.vue 中引入并注册 Clock 组件：

<template>
  <div id="app">
    <Clock />
  </div>
</template>

<script>
import Clock from './components/Clock.vue';

export default {
  name: 'App',
  components: {
    Clock,
  },
};
</script>