Vue3项目中实现动态时钟的组件

原创 于 2025-12-03 16:38:01 发布 · 730 阅读 · 19 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #vue.js

目录

1、整体思路

2、实现过程

2.1、模板部分（Template）

2.2、脚本部分（Script）

2.3、样式部分（Style）

3、关键点解析

4、样式实现详解

4.1. 所需依赖

4.2. 基础容器

4.3. 数字排列（创新点）

4.4. 刻度生成

4.5. 指针动画（核心）

5、完整代码

6、最终实现效果

本文详细介绍了Vue 3项目中利用组件实现动态时钟效果的单文件组件，使用了<script setup>语法，并且样式部分使用了SCSS。

动态的模拟时钟，包括表盘、刻度、数字以及时针、分针和秒针。

先上效果如下：

1、整体思路

代码通过CSS动画实现时钟指针的连续旋转，使用Vue响应式变量存储当前时间，通过计算动画延迟使指针从当前时间位置开始旋转。

2、实现过程

2.1、模板部分（Template）

    • 有两个view，第一个显示“动态时钟”文字，第二个是时钟本身。

    • 时钟的容器（class为clock）通过绑定样式的方式，将秒、分、时的值作为CSS自定义属性（--ds, --dm, --dh）传递，用于后续的动画延迟计算。

    • 表盘上有12个数字（1-12），使用v-for循环生成，每个数字通过CSS的offset-path属性沿着圆形路径排列。

    • 有60个刻度，同样使用v-for生成，其中每5个刻度（5的倍数）会加粗显示，代表小时刻度。

    • 有时针、分针和秒针三个元素，它们分别通过CSS动画实现旋转。

    <template>
  <view class="clock-box">动态时钟</view>
  <view class="clock-box">
    <view class="clock" :style="{ '--ds': ds, '--dm': dm, '--dh': dh }">
      <view class="clock-pane">
        <text class="clock-num" :style="{ '--i': n }" v-for="n in 12" :key="n">{{ n }}</text>
      </view>
      <view class="clock-scales">
        <text class="clock-scale" :style="{ '--i': n }" v-for="n in 60" :key="n"></text>
      </view>

      <view class="clock-hour"></view>
      <view class="clock-min"></view>
      <view class="clock-sec"></view>
    </view>
  </view>
</template>

    2.2、脚本部分（Script）

    • 使用setup语法，在组件初始化时获取当前时间，并计算出秒、分、时的值，但是注意，这里计算出的值用于初始设置动画的延迟。

    • 使用ref创建了响应式变量ds、dm、dh，分别代表秒、分、时（注意，分和时都包含了秒的小数部分，以便更精确地定位指针）。

    <script lang="ts" setup>
const d = new Date();
const h = d.getHours();
const m = d.getMinutes();
const s = d.getSeconds();
const ds = ref(s);
const dm = ref(m + s / 60);
const dh = ref(h + m / 60 + s / 3600);
</script>

    2.3、样式部分（Style）

    • 使用了SCSS语法，包含了一些嵌套规则和循环。

    • 时钟的容器设置了固定的宽高，圆角，阴影等。

    • 表盘（.clock-pane）和刻度容器（.clock-scales）绝对定位，并且刻度容器做了偏移调整。

    • 刻度的生成：通过SCSS的@for循环生成60个刻度，每个刻度旋转6度（360度/60）。

    • 数字的排列：使用CSS的offset-path属性，让12个数字沿着一个圆形路径（circle）排列，通过offset-distance调整每个数字的位置。

    • 指针的样式：分别设置了时针、分针和秒针的长度、颜色和宽度。它们都使用了同一个动画clock，但是动画的周期不同，并且通过动画延迟（animation-delay）来设置初始位置。

      • 时针动画周期为12小时（--step * 60 * 12），其中--step是60秒，即720分钟，也就是12小时。

      • 分针动画周期为60分钟（--step * 60），即1小时。

      • 秒针动画周期为60秒（--step），即1分钟。

    • 秒针的动画使用了steps(60)，这样秒针会一跳一跳的，每分钟跳60次，即每秒一跳。

    • 动画延迟的计算：通过当前时间（时、分、秒）计算出动画应该开始的点，这样当时钟显示时，指针就能指向正确的时间。

    <style lang="scss">
.clock-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.clock {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 350px;
  height: 350px;
  font-size: 24px;
  border-radius: 20px;
  box-shadow: 2px 2px 20px #0000001a;
  --step: 60s;
}

.clock-pane {
  position: absolute;
  width: 250px;
  height: 250px;
  transform: translateX(0px);
}

.clock-scales {
  position: absolute;
  width: 250px;
  height: 250px;
  transform: translate(125px, -25px);
}

.clock-scale {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 4px;
  background: #ccc;
  transform-origin: 0 150px;

  &:nth-child(5n + 1) {
    width: 4px;
    height: 6px;
    background: #333;
  }
}

@for $i from 1 through 60 {
  .clock-scale:nth-child(#{$i}) {
    transform: rotate(#{($i - 1) * 6deg});
  }
}

.clock-num {
  position: absolute;
  offset-path: path("M250 125c0 69.036-55.964 125-125 125S0 194.036 0 125 55.964 0 125 0s125 55.964 125 125z");
  offset-distance: calc(var(--i) * 10% / 1.2 - 25%);
  offset-rotate: 0deg;
}

.clock-hour {
  position: absolute;
  width: 4px;
  height: 60px;
  background: #333;
  transform: translateY(-50%) rotate(0);
  transform-origin: center bottom;
  animation: clock calc(var(--step) * 60 * 12) infinite linear;
  animation-delay: calc(-1 * var(--step) * var(--dh) * 60);
}

.clock-min {
  position: absolute;
  width: 4px;
  height: 90px;
  background: #333;
  transform: translateY(-50%) rotate(0);
  transform-origin: center bottom;
  animation: clock calc(var(--step) * 60) infinite linear;
  animation-delay: calc(-1 * var(--step) * var(--dm));
}

.clock-sec {
  position: absolute;
  width: 2px;
  height: 120px;
  background: red;
  transform: translateY(-50%) rotate(0);
  transform-origin: center bottom;
  animation: clock var(--step) infinite steps(60);
  animation-delay: calc(-1 * var(--step) * var(--ds) / 60);
}

.clock-sec::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 10px;
  height: 10px;
  content: "";
  background: #fff;
  border: 4px solid #333;
  border-radius: 50%;
  transform: translate(-50%, 50%);
}

@keyframes clock {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}
</style>

    3、关键点解析

    • 时针的动画周期是12小时，分针是1小时，秒针是1分钟。

    • 动画延迟的计算：

      秒针：-1 * var(--step) * var(--ds) / 60
      注意：--step是60秒，--ds是当前秒数（0-59），所以延迟是 -1 * 60s * 当前秒数 / 60 = -当前秒数 秒。
      例如，当前30秒，那么延迟就是-30秒，即动画从30秒前开始，现在就会指向30秒的位置。
      分针：-1 * var(--step) * var(--dm)
      --dm是当前分钟数（加上秒的小数部分，例如30.5分钟），所以延迟是 -1 * 60s * 当前分钟数 = -当前分钟数 分钟。
      时针：-1 * var(--step) * var(--dh) * 60
      --dh是当前小时数（加上分钟和秒的小数部分，例如2.5小时），乘以60将小时转换为分钟，再乘以60秒，得到秒数。

    这样，通过负的延迟，让动画从过去某个时间点开始，从而立即指向当前时间。

    4、样式实现详解

    4.1. 所需依赖

        "sass": "^1.67.0",
    "sass-loader": "^13.3.2",

    4.2. 基础容器

    .clock {
  width: 350px; height: 350px;
  --step: 60s; // CSS变量，定义动画基础周期
}

    • 定义了正方形时钟容器

    • --step: 60s 是CSS自定义属性，作为动画计算的基础单位

    4.3. 数字排列（创新点）

    .clock-num {
  offset-path: path("M250 125c0 69.036..."); // 圆形路径
  offset-distance: calc(var(--i) * 10% / 1.2 - 25%);
}

    使用CSS offset-path让数字沿圆形路径排列，比传统定位方式更优雅。

    4.4. 刻度生成

    // 生成60个刻度
@for $i from 1 through 60 {
  .clock-scale:nth-child(#{$i}) {
    transform: rotate(#{($i - 1) * 6deg}); // 每个刻度旋转6度
  }
}

    • 每个刻度旋转角度 = (序号-1) × 6°

    • 每5个刻度加粗显示（小时刻度）

    4.5. 指针动画（核心）

    .clock-sec {
  animation: clock var(--step) infinite steps(60);
  animation-delay: calc(-1 * var(--step) * var(--ds) / 60);
}

@keyframes clock {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

    动画逻辑：

    • 周期：--step (60秒) 旋转360°

    • 延迟：-1 * 周期 * 当前秒数/60

      • 负延迟让动画从当前时间位置开始

      • 例如：当前30秒 → 延迟-30秒 → 从30秒位置开始

    三个指针的区别：

    指针动画周期动画延迟步进方式
    秒针60秒calc(-1 * var(--step) * var(--ds) / 60)steps(60) 模拟跳秒
    分针60分钟calc(-1 * var(--step) * var(--dm))linear 平滑移动
    时针12小时calc(-1 * var(--step) * var(--dh) * 60)linear 平滑移动

    5、完整代码

    <template>
  <!-- 外层容器 -->
  <view class="clock-box">动态时钟</view>
  <view class="clock-box">
    <!-- 时钟主体，通过CSS变量传递时间值 -->
    <view class="clock" :style="{ '--ds': ds, '--dm': dm, '--dh': dh }">
      <!-- 12个数字 -->
      <view class="clock-pane">
        <text class="clock-num" :style="{ '--i': n }" v-for="n in 12" :key="n">{{ n }}</text>
      </view>
      <!-- 60个刻度 -->
      <view class="clock-scales">
        <text class="clock-scale" :style="{ '--i': n }" v-for="n in 60" :key="n"></text>
      </view>

      <!-- 时钟指针 -->
      <view class="clock-hour"></view>
      <!-- 时针 -->
      <view class="clock-min"></view>
      <!-- 分针 -->
      <view class="clock-sec"></view>
      <!-- 秒针 -->
    </view>
  </view>
</template>

<script lang="ts" setup>
// 获取当前时间
const d = new Date();
const h = d.getHours(); // 小时 (0-23)
const m = d.getMinutes(); // 分钟 (0-59)
const s = d.getSeconds(); // 秒 (0-59)

// 转换为响应式变量
const ds = ref(s); // 秒数
const dm = ref(m + s / 60); // 分钟 + 秒的小数部分
const dh = ref(h + m / 60 + s / 3600); // 小时 + 分和秒的小数部分
</script>

<style lang="scss">
.clock-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.clock {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 350px;
  height: 350px;
  font-size: 24px;
  border-radius: 20px;
  box-shadow: 2px 2px 20px #0000001a;
  --step: 60s; // CSS变量，定义动画基础周期
}

.clock-pane {
  position: absolute;
  width: 250px;
  height: 250px;
  transform: translateX(0px);
}

.clock-scales {
  position: absolute;
  width: 250px;
  height: 250px;
  transform: translate(125px, -25px);
}

.clock-scale {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 4px;
  background: #ccc;
  transform-origin: 0 150px;

  &:nth-child(5n + 1) {
    width: 4px;
    height: 6px;
    background: #333;
  }
}
// 生成60个刻度
@for $i from 1 through 60 {
  .clock-scale:nth-child(#{$i}) {
    transform: rotate(#{($i - 1) * 6deg}); // 每个刻度旋转6度
  }
}

.clock-num {
  position: absolute;
  offset-path: path("M250 125c0 69.036-55.964 125-125 125S0 194.036 0 125 55.964 0 125 0s125 55.964 125 125z"); // 圆形路径
  offset-distance: calc(var(--i) * 10% / 1.2 - 25%);
  offset-rotate: 0deg;
}

.clock-hour {
  position: absolute;
  width: 4px;
  height: 60px;
  background: #333;
  transform: translateY(-50%) rotate(0);
  transform-origin: center bottom;
  animation: clock calc(var(--step) * 60 * 12) infinite linear;
  animation-delay: calc(-1 * var(--step) * var(--dh) * 60);
}

.clock-min {
  position: absolute;
  width: 4px;
  height: 90px;
  background: #333;
  transform: translateY(-50%) rotate(0);
  transform-origin: center bottom;
  animation: clock calc(var(--step) * 60) infinite linear;
  animation-delay: calc(-1 * var(--step) * var(--dm));
}

.clock-sec {
  position: absolute;
  width: 2px;
  height: 120px;
  background: red;
  transform: translateY(-50%) rotate(0);
  transform-origin: center bottom;
  animation: clock var(--step) infinite steps(60);
  animation-delay: calc(-1 * var(--step) * var(--ds) / 60);
}

.clock-sec::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 10px;
  height: 10px;
  content: "";
  background: #fff;
  border: 4px solid #333;
  border-radius: 50%;
  transform: translate(-50%, 50%);
}

@keyframes clock {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}
</style>

    6、最终实现效果

    前端vue3 实现倒计时功能 组件
    阿乐的博客
    04-15 484
    倒计时组件
    精选资源
    VUE3实用组件开发合集二：时钟、倒计时组件
    07-11
    使用vue3开发时钟、倒计时组件组件，实现电子时钟、钟表、农历、秒表、定时器及各种预定义样式等。封装为组件，可直接调用，通过参数可指定样式、效果、动画时间等。提供实例源码、开发过程视频及实现过程。 使用...
    使用 Vue 3 构建炫酷科幻风格时钟组件
    ccc1006的博客
    04-15 728
    在前端开发中，一个设计精美的时钟组件不仅可以提升用户体验，还能为项目增添独特的科技感。本文将介绍如何使用 Vue 3 和一些简单的 CSS 动画，打造一个具有科幻风格的全息投影时钟组件。这个时钟不仅具备指针旋转、数字显示功能，还添加了粒子动画和未来感设计，适合用于个人项目或作为学习 Vue 组件开发的示例。本文通过 Vue 3 和 CSS 动画实现了一个炫酷的科幻风格时钟组件，展示了如何结合 Vue 的响应式特性和 CSS 的强大动画能力，打造出具有视觉冲击力的前端组件。
    CSS3+Vue实现动态时钟
    hans774882968的博客
    08-22 1020
    这是一个css布局练手的休闲项目。用了一点vue，只是为了获取当前时间+更新时钟。 又水了一发 效果 html <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>时钟</title> <link rel="stylesheet" href="https.
    vue3中实现一个动态滚动的时钟效果
    浩星
    11-15 3335
    vue3中实现一个动态滚动的时钟效果
    vue3电子时钟组件
    tx10765的博客
    04-10 1966
    【代码】vue3电子时钟组件。
    在 Vue3 项目中实现计时器组件的使用（Vite+Vue3+Node+npm+Element-plus，附测试代码）
    积累，沉淀，温故而知新
    12-26 2057
    本文讲述如何在 Vue3 项目中使用计时器组件。具体包括开发环境的配置，Vite+Vue 项目的创建，Element Plus 插件的使用，以及计时器组件的创建和使用。
    vue3实现电子实时时钟（动态时钟）
    gyz15731998001的博客
    10-25 3265
    vue3实现电子实时时钟（动态时钟）
    使用Vue3实现数字时钟，显示当前时间支持实时更新
    有我更精彩的博客
    08-21 3860
    在这篇博客中，我们借助Vue3的组合式API和setup语法糖，构建了一个简单但功能完整的数字时钟。通过使用响应式变量和生命周期钩子，我们能够轻松地实现实时更新的效果。这不仅提高了代码的可读性，还增强了应用的性能。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作书籍详情。
    vue时钟组件
    08-12
    Vue.js 是一款非常流行的前端框架，它以组件化开发为核心，极大地提高了...同时，这也展示了如何在实际项目中利用Vue.js的特性来实现一个实时更新的时钟组件，这对于理解Vue.js的工作原理和提升开发技能非常有帮助。
    精选资源
    Vue实现简单的时钟功能
    02-22
    在Vue.js中实现一个简单的时钟功能，是一个很好的学习实践项目，可以帮助我们深入理解Vue的响应式原理和组件化开发。Vue是一个轻量级的前端框架，它通过声明式的编程方式使得开发者能更加专注于数据逻辑，而无需关心...
    vue-clock:使用Vue.js的简单时钟组件
    05-13
    Vue时钟 使用Vue.js的简单时钟组件 安装 CDN < script src =" https://unpkg.com/@dangvanthanh/vue-clock " > </ script > NPM $ npm install @dangvanthanh/vue-clock --save 用法 Vue 全球的 import...
    vue 实现LED数字时钟效果（开箱即用）
    10-15
    通过上述分析，我们可以看到在Vue中实现一个LED数字时钟涉及到了Vue的基础知识，如组件化、模板、方法和过渡效果。同时，也需要一些CSS和JavaScript的知识，例如如何使用定时器和过渡效果。整个实现过程不仅可以帮助...
    Next.js 零基础开发博客后台管理系统教程（一）：环境搭建与项目初始化
    祈澈菇凉
    12-02 540
    ✅ 确定了使用 Next.js 的理由。✅ 检查并准备了开发环境。✅ 初始化了一个基于 App Router 和 TypeScript 的 Next.js 项目。✅ 初步了解了项目结构并成功运行了应用。在下一篇教程中，我们将开始构建后台管理界面的基础布局，并集成一个常用的 UI 组件库（例如 Ant Design 或继续使用 Tailwind CSS），为我们的管理系统打造一个漂亮、实用的侧边栏和顶部导航栏。
    ruoyi集成camunda实现bpmn在线设计器
    xrl2012的专栏
    12-03 367
    摘要： 本文介绍了如何在RuoYi-Vue2前端集成Camunda BPMN在线设计器，实现流程建模功能。通过npm安装bpmn-js等依赖包，配置vue.config.js解决转译和别名问题，并提供了测试页面代码示例。页面包含导入/导出XML/SVG、流程检查、部署等功能，支持BPMN流程设计器的初始化和基本操作。环境要求包括JDK 1.8+、MySQL 5.7+、Node 23+等。完整方案可参考若依工作流。
    基于Springboot2+Vue2的旅游景点购票系统
    自学网站s.jf3q.com,菜鸟的成长之路
    12-02 442
    本系统是一个集旅游景点信息展示、在线购票、用户游记分享与互动交流于一体的综合性平台。核心价值在于提供便捷的景点门票预订服务，同时构建活跃的旅游社区，促进用户间的经验分享。
    【免费云平台部署指南】按场景选型+全维度对比（附直达地址）
    最新发布
    分享技术干货，聚焦AI前沿科技
    12-03 545
    免费云平台已能覆盖从静态网站到AI模型部署的大部分场景，核心是根据项目类型（静态/后端/AI）、访问地区（国内/国外）和功能需求（数据库/容器/GPU）选择适配平台。新手建议从简单场景入手（如GitHub Pages部署博客、Hugging Face Spaces部署AI Demo），熟悉后再尝试全栈或容器化部署。
    js考古之seajs.use、layui.use是啥 以及来源？
    weixin_52236586的博客
    11-29 494
    Seajs是先行者，在浏览器原生不支持模块化的黑暗年代，发明了 seajs.use 来实现按需加载。Layui是实用主义者，它借用了这种模块化思想，用 layui.use 把 UI 组件管理得井井有条，成为了 jQuery 时代的绝唱。是终结者，它作为官方标准，吸收了前辈们的经验，配合现代打包工具，提供了最强悍的性能和开发体验。当你下次再看到 seajs.use 或 layui.use 时，请对它们保持敬意。因为正是这些“老古董”，为今天现代前端的摩天大楼，铺下了第一块基石。
    Vue3动态时间显示组件实现与优化
    综上所述，“Vue3动态时间显示[源码]”不仅仅是一个简单的时钟组件实现，更是Vue3现代化开发范式的典型应用案例。它融合了响应式编程、生命周期管理、性能优化、代码复用与国际化扩展等多项关键技术，具有很高的学习...
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

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

    打赏作者

    hhzz

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

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

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

    打赏作者

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

    抵扣说明：

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

    余额充值