AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2024-07-11 475
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【vue】 vue 翻页时钟制作，vue2、vue3

前言

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];
}

下班~

文章标签：
JavaScript
关键词：
vue vue2 VUE.js
vue vue3 VUE.js
vue时钟VUE.js
vue vue2 vue3 VUE.js
fruge365
目录
相关文章
心疼你的一切
|
17天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器，用于实现单页面应用（SPA）的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系，Vue Router 将用户访问的路径与对应的组件关联，支持哈希和历史模式监听 URL 变化，确保页面导航时正确渲染组件。
心疼你的一切
40 9
小华同学ai
|
21天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg：震撼来袭！这款基于 Vue 和 Flowable 的企业级工程项目管理项目，你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台，免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求，提供流程设计、部署、监控和任务管理等功能，适用于企业办公、生产制造、金融服务等多个场景，助力企业提升效率与竞争力。
小华同学ai
78 12
心疼你的一切
|
17天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中，class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定，可以动态更新元素的 class 属性，支持对象和数组语法，适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式，Vue 会根据数据变化自动更新 DOM。
心疼你的一切
32 3
心疼你的一切
|
17天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库，用于构建单页面应用（SPA）。它将不同页面映射到对应组件，支持嵌套路由、路由参数和导航守卫等功能，简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载，提升性能和开发效率。安装命令：`npm install vue-router`。
心疼你的一切
30 1
云栖号资讯小哥
|
存储 前端开发 JavaScript
为什么我不再用Vue，改用React？
当我走进现代前端开发行业的时候，我做了一个每位开发人员都要做的决策：选择一个合适的框架。当时正逢 jQuery 被淘汰，前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。
云栖号资讯小哥
3277 0
小宋1021
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
小宋1021
161 1
蓝易云
|
1月前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路（以vue为例）
通过上述步骤，可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制，可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景，能够显著提升用户体验。
蓝易云
113 8
潜意识Java
|
1月前
|
存储 设计模式 JavaScript
Vue 组件化开发：构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
潜意识Java
85 1
大树营养快线
|
3月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之，Vue 数据驱动视图是一种先进的理念和技术，它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性，开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中，数据驱动视图将继续发挥重要作用，推动着应用界面的不断创新和进化。
大树营养快线
116 58
阿里巴巴叫我来巡山
|
2月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统，提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性，实现用户友好的界面，方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构，确保稳定性和多功能模块设计，涵盖管理员和用户功能模块，促进物品循环使用，降低开销，提升环保意识，助力绿色校园文化建设。
阿里巴巴叫我来巡山
305 17

热门文章

最新文章

  • 1
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
  • 2
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
  • 3
    ry-vue-flowable-xg：震撼来袭！这款基于 Vue 和 Flowable 的企业级工程项目管理项目，你绝不能错过
  • 4
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
  • 6
    Vue Router 核心原理
  • 7
    Vue中的class和style绑定
  • 8
    Vue Router 简介
  • 9
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 10
    vue3利用 a 标签，文件流，JSZip 压缩包，实现文件下载
  • 1
    Vue中的class和style绑定
    32
  • 2
    Vue Router 核心原理
    40
  • 3
    Vue Router 简介
    30
  • 4
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    61
  • 5
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    84
  • 6
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    83
  • 7
    ry-vue-flowable-xg：震撼来袭！这款基于 Vue 和 Flowable 的企业级工程项目管理项目，你绝不能错过
    78
  • 8
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    81
  • 9
    iframe嵌入页面实现免登录思路（以vue为例）
    113
  • 10
    Vue 组件化开发：构建高质量应用的核心
    85

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • jQuery开发教程
  • React 入门教程开发文档

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 23-Vue.js在前端...1506518547.pdf
    • 下一篇
    通义万相：视觉生成大模型再进化