vue 实现时钟

使用 Vue 实现时钟

基础实现

创建一个 Vue 组件，利用 data 和 methods 实现动态时钟。通过 setInterval 每秒更新当前时间。

<template>
  <div>{{ currentTime }}</div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: ''
    };
  },
  mounted() {
    this.updateTime();
    setInterval(this.updateTime, 1000);
  },
  methods: {
    updateTime() {
      const now = new Date();
      this.currentTime = now.toLocaleTimeString();
    }
  }
};
</script>

使用计算属性优化

利用计算属性动态计算时间，避免手动更新状态。

<template>
  <div>{{ formattedTime }}</div>
</template>

<script>
export default {
  computed: {
    formattedTime() {
      const now = new Date();
      return now.toLocaleTimeString();
    }
  },
  mounted() {
    setInterval(() => {
      this.$forceUpdate();
    }, 1000);
  }
};
</script>

添加样式和动画

为时钟添加 CSS 样式和过渡动画，增强视觉效果。

<template>
  <div class="clock">
    {{ formattedTime }}
  </div>
</template>

<script>
export default {
  computed: {
    formattedTime() {
      const now = new Date();
      return now.toLocaleTimeString();
    }
  },
  mounted() {
    setInterval(() => {
      this.$forceUpdate();
    }, 1000);
  }
};
</script>

<style scoped>
.clock {
  font-family: 'Arial', sans-serif;
  font-size: 2rem;
  color: #333;
  text-align: center;
  padding: 20px;
  background: #f0f0f0;
  border-radius: 10px;
  transition: color 0.5s ease;
}

.clock:hover {
  color: #0066cc;
}
</style>

使用第三方库

引入 moment.js 或 date-fns 等库处理时间格式化，提供更多灵活性。

<template>
  <div class="clock">
    {{ formattedTime }}
  </div>
</template>

<script>
import moment from 'moment';

export default {
  computed: {
    formattedTime() {
      return moment().format('HH:mm:ss');
    }
  },
  mounted() {
    setInterval(() => {
      this.$forceUpdate();
    }, 1000);
  }
};
</script>

实现数字时钟

将时间拆分为小时、分钟和秒，分别显示为数字。

<template>
  <div class="digital-clock">
    <span>{{ hours }}</span>:<span>{{ minutes }}</span>:<span>{{ seconds }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hours: '00',
      minutes: '00',
      seconds: '00'
    };
  },
  mounted() {
    this.updateTime();
    setInterval(this.updateTime, 1000);
  },
  methods: {
    updateTime() {
      const now = new Date();
      this.hours = now.getHours().toString().padStart(2, '0');
      this.minutes = now.getMinutes().toString().padStart(2, '0');
      this.seconds = now.getSeconds().toString().padStart(2, '0');
    }
  }
};
</script>

<style scoped>
.digital-clock {
  font-family: 'Courier New', monospace;
  font-size: 3rem;
  color: #ff5722;
}
</style>

实现模拟时钟

使用 SVG 或 Canvas 绘制模拟时钟，动态更新指针位置。

<template>
  <div class="analog-clock">
    <svg width="200" height="200" viewBox="0 0 200 200">
      <circle cx="100" cy="100" r="95" fill="#fff" stroke="#333" stroke-width="2"/>
      <line
        x1="100" y1="100"
        :x2="hourHandX" :y2="hourHandY"
        stroke="#333" stroke-width="4"
      />
      <line
        x1="100" y1="100"
        :x2="minuteHandX" :y2="minuteHandY"
        stroke="#666" stroke-width="3"
      />
      <line
        x1="100" y1="100"
        :x2="secondHandX" :y2="secondHandY"
        stroke="#f00" stroke-width="1"
      />
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hourHandX: 100,
      hourHandY: 50,
      minuteHandX: 100,
      minuteHandY: 30,
      secondHandX: 100,
      secondHandY: 20
    };
  },
  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();

      const hourAngle = (hours * 30 + minutes * 0.5) * Math.PI / 180;
      const minuteAngle = minutes * 6 * Math.PI / 180;
      const secondAngle = seconds * 6 * Math.PI / 180;

      this.hourHandX = 100 + 40 * Math.sin(hourAngle);
      this.hourHandY = 100 - 40 * Math.cos(hourAngle);
      this.minuteHandX = 100 + 60 * Math.sin(minuteAngle);
      this.minuteHandY = 100 - 60 * Math.cos(minuteAngle);
      this.secondHandX = 100 + 70 * Math.sin(secondAngle);
      this.secondHandY = 100 - 70 * Math.cos(secondAngle);
    }
  }
};
</script>

以上方法提供了从简单到复杂的 Vue 时钟实现方案，可根据需求选择适合的方式。