当前位置：首页 > VUE

vue实现翻页时钟

2026-01-19 09:51:35VUE

Vue 实现翻页时钟

翻页时钟是一种视觉效果类似于传统翻页日历的时钟，数字会通过翻转动画切换。以下是基于 Vue 的实现方法：

基本结构

使用 Vue 的单文件组件结构，包含模板、脚本和样式部分。时钟由数字卡片组成，每个卡片代表小时、分钟或秒。

<template>
  <div class="flip-clock">
    <div class="flip-card" v-for="(digit, index) in digits" :key="index">
      <div class="top">{{ digit }}</div>
      <div class="bottom">{{ digit }}</div>
    </div>
  </div>
</template>

数据与逻辑

在脚本部分定义时间数据，并通过定时器更新：

<script>
export default {
  data() {
    return {
      time: new Date(),
      digits: [0, 0, 0, 0, 0, 0] // 格式: HH MM SS
    }
  },
  mounted() {
    setInterval(this.updateTime, 1000)
  },
  methods: {
    updateTime() {
      const now = new Date()
      const hours = now.getHours().toString().padStart(2, '0')
      const minutes = now.getMinutes().toString().padStart(2, '0')
      const seconds = now.getSeconds().toString().padStart(2, '0')
      this.digits = [...hours, ...minutes, ...seconds].map(Number)
    }
  }
}
</script>

动画样式

通过 CSS 实现翻转动画效果：

<style scoped>
.flip-clock {
  display: flex;
  gap: 5px;
}

.flip-card {
  position: relative;
  width: 40px;
  height: 60px;
  perspective: 200px;
}

.top, .bottom {
  position: absolute;
  width: 100%;
  height: 50%;
  overflow: hidden;
  text-align: center;
  line-height: 30px;
  font-size: 2rem;
  background: #333;
  color: white;
}

.top {
  top: 0;
  border-radius: 5px 5px 0 0;
  transform-origin: bottom;
}

.bottom {
  bottom: 0;
  border-radius: 0 0 5px 5px;
  transform-origin: top;
}

.flip-card.flipping .top {
  animation: flip-top 0.5s ease-in;
}

.flip-card.flipping .bottom {
  animation: flip-bottom 0.5s ease-in;
}

@keyframes flip-top {
  from { transform: rotateX(0deg); }
  to { transform: rotateX(-90deg); }
}

@keyframes flip-bottom {
  from { transform: rotateX(90deg); }
  to { transform: rotateX(0deg); }
}
</style>

动画触发逻辑

修改 updateTime 方法，添加动画触发逻辑：

methods: {
  updateTime() {
    const now = new Date()
    const hours = now.getHours().toString().padStart(2, '0')
    const minutes = now.getMinutes().toString().padStart(2, '0')
    const seconds = now.getSeconds().toString().padStart(2, '0')
    const newDigits = [...hours, ...minutes, ...seconds].map(Number)

    // 触发动画
    this.digits.forEach((digit, index) => {
      if (digit !== newDigits[index]) {
        const card = this.$el.querySelectorAll('.flip-card')[index]
        card.classList.add('flipping')
        setTimeout(() => {
          card.classList.remove('flipping')
        }, 500)
      }
    })

    this.digits = newDigits
  }
}