【vue】 vue 翻页时钟制作，vue2、vue3

已于 2024-03-05 10:02:00 修改
阅读量2.9k 收藏 20
点赞数 2
分类专栏： 前端 # vue2 # vue3 文章标签： vue.js javascript 前端
于 2023-02-05 22:57:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46123200/article/details/128894619
版权

文章目录

前言

vue 翻页时钟制作基于 kuan-vue-flip-clock 插件，由于插件的样式比较固定，所以想要改变其样式需要自定义

效果

在这里插入图片描述

实现

vue2第一种方法

1.安装依赖

npm i kuan-vue-flip-clock

2.vue单文件，我这里是局部注册

<template>
  <div class="test-clock-container">
    <flip-clock />
  </div>
</template>
<script>
import FlipClock from "kuan-vue-flip-clock";
export default {
  components: {
    FlipClock,
  },
};
</script>
<style lang="scss">
.test-clock-container {
  font: normal 14px "Helvetica Neue", Helvetica, sans-serif;
  user-select: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  background: radial-gradient(ellipse at center, #969696 0%, #595959 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
</style>

参考文档：kuan-vue-flip-clock - npm

vue2第二种方法

新建下面几个文件，我是放在一个文件夹里，展示的话就是FlipClock.vue

FlipClock.vue

<template>
  <div class="clock-container">
    <flip-item :total="2" :current="timeArr[0]"/>
    <flip-item :total="9" :current="timeArr[1]"/>
    <div class="colon"></div>
    <flip-item :total="5" :current="timeArr[2]"/>
    <flip-item :total="9" :current="timeArr[3]"/>
    <div class="colon"></div>
    <flip-item :total="5" :current="timeArr[4]"/>
    <flip-item :total="9" :current="timeArr[5]"/>
  </div>
</template>

<script>
import FlipItem from './FlipItem.vue'
import { getTimeArr } from './utils'

export default {
  components: {
    FlipItem
  },
  data() {
    return {
      timeArr: getTimeArr()
    }
  },
  mounted() {
    this.startTimer()
  },
  beforeDestroy() {
    this.stopTimer()
  },
  methods: {
    startTimer() {
      this.timer = setTimeout(() => {
        this.stopTimer()
        this.timeArr = getTimeArr()
        this.startTimer()
      }, 1000)
    },
    stopTimer() {
      clearTimeout(this.timer)
    }
  }
}
</script>

<style lang='scss' scoped>
.clock-container {
  display: flex;
  align-items: center;
}
.colon {
  height: 50px;
  padding: 0 10px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  &::after,
  &::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
  }
}
</style>

FlipItem.vue

<template>
  <div :class="{play: isPlay}">
    <ul class="flip">
      <li
        class="item"
        v-for="(item, key) in total + 1"
        :class="{active: current === key, before: key === before}"
        :key="item"
      >
        <div class="up">
          <div class="shadow"></div>
          <div class="inn">{{key}}</div>
        </div>
        <div class="down">
          <div class="shadow"></div>
          <div class="inn">{{key}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 9
    },
    current: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      before: this.total === this.current ? -1 : this.total,
      isPlay: false
    }
  },
  watch: {
    current(current, preCurrent) {
      this.before = preCurrent
      if (!this.isPlay) {
        this.isPlay = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$width: 60px;
$height: 90px;
$fontSize: 80px;
$lineWidth: 3px;
$radius: 6px;

.flip {
  position: relative;
  margin: 5px;
  width: $width;
  height: $height;
  font-size: $fontSize;
  font-weight: bold;
  line-height: $height - $lineWidth;
  border-radius: $radius;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
  .item {
    list-style: none;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    perspective: 200px;
    transition: opacity 0.3s;
    &.active {
      z-index: 2;
    }
    &:first-child {
      z-index: 2;
    }
    .up,
    .down {
      z-index: 1;
      position: absolute;
      left: 0;
      width: 100%;
      height: 50%;
      overflow: hidden;
    }
    .up {
      transform-origin: 50% 100%;
      top: 0;
      &:after {
        content: '';
        position: absolute;
        top: ($height - $lineWidth) / 2;
        left: 0;
        z-index: 5;
        width: 100%;
        height: $lineWidth;
        background-color: rgba(0, 0, 0, 0.4);
      }
    }
    .down {
      transform-origin: 50% 0%;
      bottom: 0;
      transition: opacity 0.3s;
    }
    .inn {
      position: absolute;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 200%;
      color: #ccc;
      text-shadow: 0 1px 2px #000;
      text-align: center;
      background-color: #333;
      border-radius: $radius;
    }
    .up .inn {
      top: 0;
    }
    .down .inn {
      bottom: 0;
    }
  }
}
.play {
  .item {
    &.before {
      z-index: 3;
    }
    &.active {
      animation: asd 0.5s 0.5s linear both;
      z-index: 2;
    }
    &.before .up {
      z-index: 2;
      animation: turn-up 0.5s linear both;
    }
    &.active .down {
      z-index: 2;
      animation: turn-down 0.5s 0.5s linear both;
    }
  }
}

@keyframes turn-down {
  0% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

@keyframes turn-up {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-90deg);
  }
}

@keyframes asd {
  0% {
    z-index: 2;
  }
  5% {
    z-index: 4;
  }
  100% {
    z-index: 4;
  }
}

.play {
  .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  .before .up .shadow {
    background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 1) 100%);
    animation: show 0.5s linear both;
  }
  .active .up .shadow {
    background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 1) 100%);
    animation: hide 0.5s 0.3s linear both;
  }
  .before .down .shadow {
    background: linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.1) 100%);
    animation: show 0.5s linear both;
  }
  .active .down .shadow {
    background: linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.1) 100%);
    animation: hide 0.5s 0.3s linear both;
  }
}

@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>

index.js

import FlipClock from './FlipClock.vue'

export default FlipClock

utils.js

/**
 * @description: 剩余时间
 */
export function getTimeArr(now = new Date()) {
  // const Y = now.getFullYear()
  // const M = now.getMonth() + 1
  // const D = now.getDate()
  const h = now.getHours()
  const m = now.getMinutes()
  const s = now.getSeconds()
  return [
    // ...toArr(Y),
    // ...toArr(M),
    // ...toArr(D),
    ...toArr(h),
    ...toArr(m),
    ...toArr(s)
  ]
}

// 更换数组类型
function toArr(n) {
  return n >= 10 ? ('' + n).split('').map(item => Number(item)) : [0, n]
}

vue3中实现

新建下面几个文件，我是放在一个文件夹里，展示的话就是FlipClock.vue
FlipClock.vue

<template>
  <div class="clock-container">
    <flip-item :total="2" :current="timeArr[0]" />
    <flip-item :total="9" :current="timeArr[1]" />
    <div class="colon"></div>
    <flip-item :total="5" :current="timeArr[2]" />
    <flip-item :total="9" :current="timeArr[3]" />
    <div class="colon"></div>
    <flip-item :total="5" :current="timeArr[4]" />
    <flip-item :total="9" :current="timeArr[5]" />
  </div>
  <div></div>
</template>

<script setup>
import FlipItem from "./FlipItem.vue";
import { getTimeArr } from "./utils";
import { ref, onMounted, onBeforeUnmount } from "vue";

const timeArr = ref(getTimeArr());
var timer;

onMounted(() => {
  startTimer();
});

onBeforeUnmount(() => {
  stopTimer();
});

function startTimer() {
  console.log("启动定时器+++++++++++++++++++++++++++++");
  timer = setInterval(() => {
    // timeArr.value = getTimeArr(); // 使用 timeArr.value 更新值
    timeArr.value = getTimeArr();
    console.log("时间更新为:", timeArr.value);
  }, 1000);
}

function stopTimer() {
  console.log("停止定时器----------------------------");
  clearInterval(timer);
}
</script>
<style scoped>
.clock-container {
  display: flex;
  align-items: center;
}

.colon {
  height: 50px;
  padding: 0 10px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

.colon::after,
.colon::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
}
</style>

FlipItem.vue

<template>
  <div :class="{ play: isPlay }">
    <ul class="flip">
      <li
        class="item"
        v-for="(item, key) in total + 1"
        :class="{ active: current == key, before: key == before }"
        :key="item"
      >
        <div class="up">
          <div class="shadow"></div>
          <div class="inn">{{ key }}</div>
        </div>
        <div class="down">
          <div class="shadow"></div>
          <div class="inn">{{ key }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, watch, defineProps, computed } from "vue";
// const props = defineProps();

// const total = props.total;
// const current = props.current;
const total = 9;

const props = defineProps(["current"]);
const current = computed(() => {
  return props.current;
});
const before = ref(total === current.value ? -1 : total);
const isPlay = ref(false);
console.log(current, "fffffffffffff ");

// watch(current, (newValue, oldValue) => {
//   console.log('oldValue',current)
//   before.value = oldValue;
//   if (!isPlay.value) {
//     isPlay.value = true;
//   }
// });
// 监听 current 属性的变化
watch(
  () => props.current,
  (newValue, oldValue) => {
    console.log("current 属性的值发生了变化");
    before.value = oldValue;
    if (!isPlay.value) {
      isPlay.value = true;
    }
  }
);
// console.log(props)
// watch(current, (newValue, oldValue) => {
//   console.log('watch triggered!');
//   console.log('oldValue', newValue);
//   console.log('oldValue', oldValue);
//   before.value = oldValue;
//
//   if (!isPlay.value) {
//     isPlay.value = true;
//   }
// });
</script>

<style lang="scss" scoped>
$width: 60px;
$height: 90px;
$fontSize: 80px;
$lineWidth: 3px;
$radius: 6px;

.flip {
  position: relative;
  margin: 5px;
  width: $width;
  height: $height;
  font-size: $fontSize;
  font-weight: bold;
  line-height: $height - $lineWidth;
  border-radius: $radius;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
  .item {
    list-style: none;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    perspective: 200px;
    transition: opacity 0.3s;
    &.active {
      z-index: 2;
    }
    &:first-child {
      z-index: 2;
    }
    .up,
    .down {
      z-index: 1;
      position: absolute;
      left: 0;
      width: 100%;
      height: 50%;
      overflow: hidden;
    }
    .up {
      transform-origin: 50% 100%;
      top: 0;
      &:after {
        content: "";
        position: absolute;
        .top: calc(($height - $lineWidth) / 2);
        left: 0;
        z-index: 5;
        width: 100%;
        height: $lineWidth;
        background-color: rgba(0, 0, 0, 0.4);
      }
    }
    .down {
      transform-origin: 50% 0%;
      bottom: 0;
      transition: opacity 0.3s;
    }
    .inn {
      position: absolute;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 200%;
      color: #ccc;
      text-shadow: 0 1px 2px #000;
      text-align: center;
      background-color: #333;
      border-radius: $radius;
    }
    .up .inn {
      top: 0;
    }
    .down .inn {
      bottom: 0;
    }
  }
}
.play {
  .item {
    &.before {
      z-index: 3;
    }
    &.active {
      animation: asd 0.5s 0.5s linear both;
      z-index: 2;
    }
    &.before .up {
      z-index: 2;
      animation: turn-up 0.5s linear both;
    }
    &.active .down {
      z-index: 2;
      animation: turn-down 0.5s 0.5s linear both;
    }
  }
}

@keyframes turn-down {
  0% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

@keyframes turn-up {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-90deg);
  }
}

@keyframes asd {
  0% {
    z-index: 2;
  }
  5% {
    z-index: 4;
  }
  100% {
    z-index: 4;
  }
}

.play {
  .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  .before .up .shadow {
    background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 1) 100%);
    animation: show 0.5s linear both;
  }
  .active .up .shadow {
    background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 1) 100%);
    animation: hide 0.5s 0.3s linear both;
  }
  .before .down .shadow {
    background: linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.1) 100%);
    animation: show 0.5s linear both;
  }
  .active .down .shadow {
    background: linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.1) 100%);
    animation: hide 0.5s 0.3s linear both;
  }
}

@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>

utils.js

/**
 * @description: 剩余时间
 */
export function getTimeArr(now = new Date()) {
  // const Y = now.getFullYear()
  // const M = now.getMonth() + 1
  // const D = now.getDate()
  const h = now.getHours();
  const m = now.getMinutes();
  const s = now.getSeconds();
  return [
    // ...toArr(Y),
    // ...toArr(M),
    // ...toArr(D),
    ...toArr(h),
    ...toArr(m),
    ...toArr(s),
  ];
}

// 更换数组类型
function toArr(n) {
  return n >= 10 ? ("" + n).split("").map((item) => Number(item)) : [0, n];
}

下班~

Vue3通透教程【一】Vue3现状—必然趋势？
官方推荐
01-30 7万+
凉哥作为 Vue 的忠诚粉丝输出过大量的 Vue 文章，应粉丝要求开始更新 Vue3 的相关技术文章，Vue 框架目前的地位大家应该都晓得，所谓三大框架使用人数最多，公司选型最多的框架，凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因，和 Vue 框架相比其他框架的巨大优势，有兴趣的伙伴可以看一下Vue框架背后的故事。
Vue3通透教程【二】更高效的构建工具—Vite
热门推荐
官方推荐
02-06 6万+
为大家介绍新一款的构建工具——Vite，当然我们Vite更多的是被用于开发阶段，下面也为大家介绍到了 Vite 想比于 webpack 编译中的优势，以及Vite构建Vue3项目的步骤教程，赶快跟着我尝试一下吧！
炫酷翻页时钟FlipClock的使用和样式自定义
前端阿玉博客
07-23 1万+
前言 基于kuan-vue-flip-clock插件，由于插件的样式比较固定，所以想要改变其样式需要自定义，这里我是在vue2.x,样式表sass 插件文档https://www.npmjs.com/package/kuan-vue-flip-clock 自定义样式如下效果如下 默认样式如下 1.安装插件 npm i kuan-vue-flip-clock //或者 cnpm i kuan-vue-flip-clock //或者yarn add kuan-vue...
基于vuejs实现个性化时钟
12-24
基于vuejs实现个性化时钟
vue写一个翻页的时间插件
m0_49016709的博客
02-16 4641
读秒效果有一个从上向下的翻页效果
Vue实现时钟
寒蝉的小聒噪的博客
06-30 4520
采用定时器来获取最新的时间，通过Date的方法获取年份、月份、日期、星期以及当前时间，用来拼装时钟，然后使用生命周期函数create来创建定时器，是时钟每隔一秒钟发生一次变化，达到时钟在走的效果，同时在beforeDestroy函数中清除定时器 toTimeString() 方法可把 Date 对象的时间部分转换为字符串，并返回结果。 const days = ['天', '一', '二', '三', '四', '五', '六']; // 星期数组 let icnow = new Date()...
vue一个简易时钟
weixin_45859470的博客
05-15 466
【代码】vue一个简易时钟。
使用vue编写一个html页面，实现网页时钟功能，提供年月日时秒显示。
2301_76478257的博客
03-17 1073
使用vue编写一个html页面，实现网页时钟功能，提供年月日时秒显示。
凝固时间：用素材改的vue版翻页倒计时
02-09
＃从网上找的原生JS翻页时钟素材自己改成vue倒计时没啥技术含量 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
Vue3通透教程【五】Vue3中的响应式数据 reactive函数、ref函数
官方推荐
02-23 4万+
Vue3中的响应式数据
Vue实现简单的时钟功能
02-22
Vue实现简单的时钟功能,适合vue学习
数字时钟翻页web
05-08
web页面，时钟翻页分享另外一种风格的时钟，这款CSS3时钟动画是一款数字时钟，时间每过一秒，相应的位置就会像翻日历一样翻过去。另外，这款CSS3数字时钟有点立体的效果，非常漂亮。
vue时钟组件
08-12
vue 时钟组件
js+css翻页时钟插件
05-10
js+css翻页时钟插件
vue-clock:vue 的一个时钟组件
04-30
vue-clock-lonlyape vue 的时钟组件 use # install npm install -S vue-clock-lonlyape # main.js ...... import vueClock from &#39;vue-clock-lonlyape&#39; Vue use(vueClock) ...... or # xxx.vue ...... import {vueClock} from &#39;vue-clock-lonlyape&#39; ...... components:{ myClock:vueClock } ...... 例子 参数 属性 类型 默认值 说明 width String auto canvas 画布的宽度，默认为画布容器的宽度 height String auto canvas 画布的高度，默认与画布的宽度一致 timezone Number 本地时区 ，如时
Vue3通透教程【四】Vue3组合API初体验
官方推荐
02-20 4万+
初步了解Vue的组合API和Vue2的选项式API视觉差距！
vue入门小案例（实时显示当前日期和时间的时钟）
2301_76478257的博客
03-19 2421
vue入门小案例（实时显示当前日期和时间的时钟）
使用Vue3实现数字时钟，显示当前时间支持实时更新
有我更精彩的博客
08-21 3037
在这篇博客中，我们借助Vue3的组合式API和setup语法糖，构建了一个简单但功能完整的数字时钟。通过使用响应式变量和生命周期钩子，我们能够轻松地实现实时更新的效果。这不仅提高了代码的可读性，还增强了应用的性能。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作书籍详情。
vue3中实现一个动态滚动的时钟效果
浩星
11-15 3166
vue3中实现一个动态滚动的时钟效果
vue3 翻页时钟
最新发布
03-21
<think>好的，我现在需要帮助用户找到关于Vue3实现翻页时钟的示例代码或组件实现方法。首先，我要回顾用户提供的引用内容，看看有没有相关的资源。用户给的引用里有提到vue2-flip-countdown和Vue Flip Down组件，但这些都是针对Vue2的。用户需要的是Vue3的解决方案，所以可能需要考虑如何迁移这些组件到Vue3，或者寻找现有的Vue3组件。 接下来，用户提到的引用4是关于vue+canvas的倒计时插件，但也是Vue2的，不过可能其中的实现思路可以借鉴。比如使用canvas绘制翻页效果，或者利用CSS动画模拟翻页。这时候，我需要考虑Vue3的组合式API如何与这些技术结合。 然后，用户需要具体的示例代码或组件实现步骤。可能需要分步骤讲解：首先安装必要的依赖，比如Vue3和可能需要的动画库；然后创建组件的基本结构，使用CSS实现翻转动画；接着处理数字的变化逻辑，使用计算属性或watch来监听时间变化；最后集成到应用中。 还要考虑到Vue3的新特性，比如Composition API，如何利用setup函数来组织代码。另外，翻页效果可能需要使用CSS的transform和transition，或者更复杂的动画库如GSAP来实现平滑效果。 同时，用户可能希望组件是可复用的，所以需要设计props，比如倒计时的时间、样式配置等。另外，引用3提到的Vue Flip Down组件虽然是为Vue2设计的，但它的实现思路——使用CSS翻转效果和动态更新数字——可以应用到Vue3中，只是需要调整代码结构以适应Vue3的响应式系统。 最后，可能需要检查是否有现成的Vue3组件，比如在npm上搜索vue3-flip-countdown，或者GitHub上的开源项目。如果找不到，就需要指导用户如何自行实现，参考现有的Vue2组件进行迁移，并利用Vue3的新特性优化代码。</think>以下是为您整理的Vue3实现翻页时钟的解决方案： ### 一、实现思路 1. **核心原理**：通过CSS3的3D变换实现数字翻转动画，结合Vue3的响应式系统动态更新时间 2. **关键技术**： - 使用`transform-style: preserve-3d`创建3D空间[^3] - 通过`requestAnimationFrame`实现流畅动画 - Vue3的`Composition API`管理时间状态 ### 二、基础实现示例 ```vue <template> <div class="flip-clock"> <div v-for="(digit, index) in timeDigits" :key="index" class="flip-unit"> <div class="current">{{ digit }}</div> <div class="next"></div> </div> </div> </template> <script setup> import { ref, computed, onMounted } from &#39;vue&#39; const time = ref(new Date()) const timeDigits = computed(() => { return time.value.toLocaleTimeString().replace(/:/g, &#39;&#39;).split(&#39;&#39;) }) onMounted(() => { setInterval(() => { time.value = new Date() }, 1000) }) </script> <style> .flip-clock { display: flex; gap: 10px; perspective: 1000px; } .flip-unit { position: relative; width: 60px; height: 100px; transform-style: preserve-3d; } .current, .next { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; justify-content: center; align-items: center; font-size: 3em; background: #333; color: white; border-radius: 5px; } .next { transform: rotateX(180deg); } .flip-unit.flipping .current { transform: rotateX(-180deg); transition: transform 0.6s; } .flip-unit.flipping .next { transform: rotateX(0deg); transition: transform 0.6s; } </style> ``` ### 三、优化方案 1. **使用现成组件库**： - 推荐`vue3-flip-countdown`（需自行实现或寻找Vue3移植版） - 可参考Vue2组件`vue2-flip-countdown`进行升级[^2] 2. **高级动画实现**： ```javascript // 在setup中添加动画逻辑 const animateFlip = (element) => { element.classList.add(&#39;flipping&#39;) setTimeout(() => { element.classList.remove(&#39;flipping&#39;) }, 600) } watch(timeDigits, (newVal, oldVal) => { if (newVal.join(&#39;&#39;) !== oldVal.join(&#39;&#39;)) { const units = document.querySelectorAll(&#39;.flip-unit&#39;) units.forEach((unit, index) => { if (newVal[index] !== oldVal[index]) { animateFlip(unit) } }) } }) ``` ### 四、扩展功能建议 1. 添加`<canvas>`实现粒子特效（参考vue-canvas-countdown实现思路）[^4] 2. 集成国际化时间格式 3. 增加主题切换功能
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fruge365

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值