简介这是一份结合 jQuery 与 Vue.js 的创意时钟动画源码以圆形罗盘为视觉载体将实时节气信息融入时间显示极具传统文化韵味。项目主要面向前端初学者及中级开发者用于练习组件化开发、DOM 操作、Canvas 绘图和动画过渡等技能。压缩包共 8 个文件包含 3 个 CSS 样式表、3 个 JS 脚本jQuery 库、Vue 框架及核心逻辑、1 个 HTML 入口页面和 1 个项目配置文件整包仅 173KB轻量易用。目前已有 621 人学习下载具备不错的参考价值。通过源码可清晰看到 Vue 数据绑定如何驱动罗盘指针旋转与节气文字更新jQuery 如何辅助实现元素操作与异步交互CSS 动画与脚本逻辑分离便于逐段理解和复用。由于包含 .project 工程文件也能直接导入开发环境运行调优。 我最早看到抖音上那种带着节气提醒的圆形时钟第一反应是“这玩意儿不是普通Canvas硬画出来的应该是有完整计算逻辑的”后来真正做了一个类似项目——jQueryVUE抖音带实时节气创意圆形罗盘时钟动画特效才发现里面藏着的东西比想象中多。节气不是写死的日期表而是靠天文公式实时算出来的罗盘上的刻度、方位、指针动画也不是一张静态图而是DOMCSSJS协同工作的结果。这篇我就把它彻底拆开讲清楚从节气算法到罗盘布局从jQuery和Vue的分工到动画性能优化全部按我自己实操的顺序来写保证你照着能做出来。1. 项目整体设计和思路拆解1.1 这个项目到底解决了什么问题先说结论这个项目本质上是一个前端可视化时钟组件但它的核心价值不在“看时间”而在“看节气”。传统的时钟只显示时分秒而抖音上流行的这类罗盘时钟把中国传统二十四节气、十二地支、方位刻度等元素融入钟面形成了一个既带民俗文化属性、又有现代动画质感的复合组件。用户打开页面就能看到当前时间、当前节气、节气倒计时视觉上还是一个不断转动的复古罗盘。从技术角度看它的难点有三块节气不能写死直接用一个对象把二十四节气的日期存死是大部分人做H5页面时的偷懒做法。但真实项目中节气日期逐年变化今年和明年不一样所以必须用天文算法去算。罗盘不是一张图刻度、卦位、干支文字如果全部贴图后期改字号改颜色都麻烦而且缩放会糊。更好的方案是用Canvas或DOM动态绘制。动画不能卡指针旋转、秒针走动、背景光晕呼吸这些如果全部依赖JavaScript频繁操作DOM会掉帧需要合理区分哪些用JS算、哪些用CSS3过渡。我最终选择的方案是Vue负责整体数据流和组件状态jQuery负责DOM操作和部分与Vue不冲突的动效逻辑Canvas负责罗盘底盘的绘制CSS3负责指针旋转的光滑过渡。1.2 为什么我没有用纯Vue或者纯jQuery这个问题我纠结了挺久因为纯Vue项目里再引入jQuery经常被吐槽“破坏框架规范”。但这个项目有它的特殊性。Vue的强项是数据驱动视图比如当前时间戳变化后Vue可以自动更新对应的文本节点。但罗盘时钟里指针每秒钟旋转6度秒针在PerSecond里触发transform: rotate()这种高频且连续的线性变化用Vue的响应式数据去驱动反而会不断触发虚拟DOM diff白白消耗性能。而jQuery在处理这种“拿到DOM元素直接改样式”的场景上确实非常直接——$(#secondHand).css(transform, rotate( deg deg))一句就完了没有任何中间层开销。所以我的分工原则是Vue管数据jQuery管视觉微调Vue负责节气计算结果、当前时间上下文、倒计时天数等业务数据jQuery只在指针动画、某些入场特效、以及老版本浏览器兼容处理时介入。两者之间通过window上的一个事件总线传递数据不让jQuery直接改Vue实例内部数据。用Vue的mounted钩子里初始化jQuery插件实例避免DOM还没渲染完就拿不到节点。核心心得不要为了框架纯洁性而把所有事都交给一个方案。数据层和视觉层的诉求完全不同各自的优势合起来才是这个项目的正确打开方式。实际上后期维护的时候这个混合模式也帮我省了不少事。后来产品说要加一个“秒针震动”的特效我只需要在jQuery的动画函数里多写一段逻辑不需要动Vue组件结构。反过来Vue这边如果改节气数据的接口也完全不碰视觉代码。2. 节气计算从天文公式到前端代码2.1 节气不是按天数硬排的很多人做节气倒计时直接在网上找一张表比如“清明4月4日-6日”然后写死。这个数据到明年就可能有偏差因为节气是根据太阳在黄道上的位置来定的——太阳从黄经0度起每15度就是一个节气。这里的关键点是节气时刻是精确到分秒的不是简单的一天。比如2025年清明是4月4日20时48分精确到这个程度才能做出“距离清明还有3天5小时12分”这种倒计时效果。前端要算出节气时刻需要用到简化版的VSOP87天文算法或者更实际一点——使用现有的天文计算库。考虑到项目体积我直接用了封装好的lunar-javascript库它内部已经处理了太阳黄经计算、时区偏移等复杂逻辑暴露出来的API很简洁// 引入lunar-javascript库 import { Solar, Lunar } from lunar-javascript; // 获取当天农历信息 const solar Solar.fromYmd(2025, 4, 4); const lunar solar.getLunar(); // 输出当前节气名如清明 console.log(lunar.getJieQi()); // 获取下一个节气 const nextJieQi lunar.getNextJieQi(); console.log(nextJieQi.getName(), nextJieQi.getSolar());用这个库有一个明显的好处它不光能算节气还能顺带输出农历日期、干支纪年、生肖——罗盘时钟上如果需要显示这些元素都能一次性拿到。2.2 节气在罗盘上的排布逻辑拿到节气数据后需要把它映射到圆盘上。我的排布方式是外圈十二地支中圈二十四节气内圈八卦方位。二十四节气在罗盘上的位置不是均匀分布的因为它对应的是太阳黄经度数。但为了视觉上的对称传统罗盘通常把二十四个节气均匀地分布在360度圆盘上——这其实是一种“理想化处理”因为每个节气之间的太阳黄经间隔严格来说是相等的都是15度所以均匀排列反而是符合天文意义的。我在代码里定义一个数组const jieQiNames [ 立春, 雨水, 惊蛰, 春分, 清明, 谷雨, 立夏, 小满, 芒种, 夏至, 小暑, 大暑, 立秋, 处暑, 白露, 秋分, 寒露, 霜降, 立冬, 小雪, 大雪, 冬至, 小寒, 大寒 ]; // 每个节气对应的起始角度 const angleStep 360 / 24; jieQiNames.forEach((name, index) { const angle index * angleStep; // 0度从正上方开始 // 换算成弧度用于Canvas或绝对定位 });这里有一个坑罗盘的正方向是正北0度但数学坐标系的正方向是正东3点方向。所以绘制的时候需要做一次角度偏移// 顺时针旋转90度让0度指向正上方正北 const drawAngle (angle - 90) * Math.PI / 180; const x centerX radius * Math.cos(drawAngle); const y centerY radius * Math.sin(drawAngle);如果不做这个偏移节气文字和刻度全部会偏到右侧效果极其诡异。第一次做的时候我没注意画出来所有文字都在右边排查了半天才发现是坐标系的锅。3. 罗盘时钟的Canvas绘制细节3.1 底层圆盘用Canvas而不是DOM为什么不用DOM一个个堆span来画刻度因为罗盘上的元素太多了——外圈24个节气字、24个刻度点中圈12个地支字、12个刻度内圈8个卦象加上中心的指针轴这是接近80个DOM节点。如果每一个都做CSS定位性能没有问题但写起来极其费劲至少得上百行定位代码。Canvas的优势在于画圆、画线、写字都是原生方法几十行就能搞定整个底盘。我的实现方式是在Vue组件的mounted后初始化一个Canvas画布然后分多轮绘制// 1. 画最外层的浅灰色圆环 ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.strokeStyle #e8e0d4; ctx.lineWidth 2; ctx.stroke(); // 2. 画二十四节气的文字 ctx.font 12px 思源宋体, serif; ctx.fillStyle #3a3a3a; ctx.textAlign center; ctx.textBaseline middle; jieQiNames.forEach((name, i) { const angle (i * 15 - 90) * Math.PI / 180; const textX x (radius - 24) * Math.cos(angle); const textY y (radius - 24) * Math.sin(angle); ctx.fillText(name, textX, textY); }); // 3. 画小刻度点 for (let i 0; i 60; i) { const angle (i * 6 - 90) * Math.PI / 180; const r1 radius - 45; const r2 radius - 52; ctx.beginPath(); ctx.moveTo(x r1 * Math.cos(angle), y r1 * Math.sin(angle)); ctx.lineTo(x r2 * Math.cos(angle), y r2 * Math.sin(angle)); ctx.stroke(); }这种做法的好处是画布只画一次后续不需要重绘整个底盘。指针和动画层单独用DOM来实现这样避免Canvas每秒钟清屏重绘导致的高CPU占用。3.2 指针层为什么不用Canvas这里我得专门讲一个取舍。很多人会觉得“既然底盘用Canvas画了指针也直接在Canvas里画不就行了”——从技术上讲完全可行每一帧requestAnimationFrame里清屏重画整个圆盘加上指针但这么做有性能问题Canvas重绘面积越大GPU和CPU压力越大在低端安卓机上特别明显。所以我把层次拆成两层底层Canvas静态底盘只画一次永不重绘上层DOM指针三根指针用div实现旋转用CSS3transform: rotate()由浏览器合成器负责动画不触发重排指针的旋转是通过requestAnimationFrame驱动的let lastTime 0; function updateClock(timestamp) { const now new Date(); // 秒针角度每秒旋转6度 const secondDeg now.getSeconds() * 6 now.getMilliseconds() * 0.006; // 分针角度每分钟旋转6度加上秒针带来的微小偏移 const minuteDeg now.getMinutes() * 6 now.getSeconds() * 0.1; // 时针角度每小时旋转30度加上分钟带来的偏移 const hourDeg (now.getHours() % 12) * 30 now.getMinutes() * 0.5; $(#secondHand).css(transform, rotate(${secondDeg}deg)); $(#minuteHand).css(transform, rotate(${minuteDeg}deg)); $(#hourHand).css(transform, rotate(${hourDeg}deg)); requestAnimationFrame(updateClock); } requestAnimationFrame(updateClock);这里没有用setInterval是因为setInterval在标签页切到后台时会受浏览器节流策略影响时间累积误差明显而requestAnimationFrame是浏览器原生动画帧回调时间间隔更精准还能自动暂停后台运行节省资源。实际效果对比过用setInterval跑半小时指针会慢大概1秒用requestAnimationFrame跑半小时肉眼几乎看不出偏差。4. Vue的核心作用状态管理、组件通信和生命周期4.1 组件结构规划整个项目不是一整个大乱炖文件而是拆成了几个组件components/ ├── ClockRotor.vue // 罗盘时钟主组件 ├── JieQiDisplay.vue // 节气显示面板当前节气、倒计时 ├── CalendarInfo.vue // 农历信息面板年、月、日、生肖 └── RotorBackground.vue // Canvas底盘的封装组件每个组件只管自己的事。RotorBackground只需要在mounted里画一次画布接收一个radiuspropsJieQiDisplay接收父组件算好的节气数据负责展示CalendarInfo负责展示农历年月日。Vue组件之间通过props向下传数据通过$emit向上抛事件。比如节气数据是在ClockRotor的mounted里计算好然后传给子组件template div classclock-container RotorBackground :radius160 / !-- 指针动画由时钟组件内部驱动 -- JieQiDisplay :current-jieqicurrentJieQi :next-jieqinextJieQi :countdowncountdown / CalendarInfo :lunar-yearlunarYear :lunar-daylunarDay :zodiaczodiac / /div /template script import RotorBackground from ./components/RotorBackground.vue; import JieQiDisplay from ./components/JieQiDisplay.vue; import CalendarInfo from ./components/CalendarInfo.vue; export default { name: ClockRotor, components: { RotorBackground, JieQiDisplay, CalendarInfo }, data() { return { currentJieQi: , nextJieQi: , countdown: , lunarYear: , lunarDay: , zodiac: }; }, mounted() { this.setupClockData(); // 初始化jQuery插件的钩子 this.initRotorEffects(); }, methods: { setupClockData() { // 计算五行中的节气信息 }, initRotorEffects() { // 在这调用jQuery动效函数 } } }; /script4.2 Vue的computed属性在节气倒计时里的应用倒计时是一个每秒钟都会变化的数据。如果把倒计时放到data里每秒手动更新也不是不行但用computed会更符合Vue的设计哲学——因为倒计时的值可以由“当前时间”和“目标时间”推导出来不需要单独维护一份可变状态。我在ClockRotor.vue里放了一个核心的data字段data() { return { now: new Date(), // 每秒钟更新一次 targetJieQiDate: null // 下一个节气的时间戳 }; }, computed: { countdownText() { if (!this.targetJieQiDate) return ; const diff this.targetJieQiDate - this.now.getTime(); if (diff 0) return 节气已到; const days Math.floor(diff / (24 * 60 * 60 * 1000)); const hours Math.floor((diff % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)); const minutes Math.floor((diff % (60 * 60 * 1000)) / (60 * 1000)); const seconds Math.floor((diff % (60 * 1000)) / 1000); return ${days}天 ${hours}小时 ${minutes}分 ${seconds}秒; } }, mounted() { // 每秒更新now this.timer setInterval(() { this.now new Date(); }, 1000); }, beforeDestroy() { clearInterval(this.timer); }需要说明的是“setInterval每秒更新now”和“requestAnimationFrame驱动指针”是可以共存的。Vue的响应式系统更新倒计时文本同时RAF驱动指针旋转两者互不干扰。但要注意不要用Vue的data来存秒针角度否则每秒触发整个组件重新渲染效率反而下降了。4.3 Vue和jQuery之间的桥接方式既然这个项目是jQueryVUE混合双打那两者之间的通信就必须讲究。我不能让jQuery插件直接操作Vue组件的内部数据否则数据流就乱了。我采用的方案是在Vue实例上挂一个全局事件总线jQuery通过它来通知Vue“特效动画已结束”。// 在Vue的mounted里初始化 mounted() { // 通过window对象挂载一个事件总线 window.clockBus new Vue(); // 启动jQuery罗盘特效 this.initRotorEffects(); // 监听jQuery发来的动画结束事件 window.clockBus.$on(rotor-swing-end, (payload) { this.onRotorSwingEnd(payload); }); }, methods: { initRotorEffects() { // 以jQuery为入口的微动画 $(.rotor-bg).animate({ opacity: 0.9 }, 500, () { window.clockBus.$emit(rotor-swing-end, { opacity: 0.9 }); }); }, onRotorSwingEnd() { // Vue这边处理后续逻辑比如更新DOM状态 } }实际上jQuery在这个项目里还有一个很有价值的用途——兼容旧版浏览器的DOM查询和操作。Vue虽然自身也操作DOM但如果你在一个需要兼容IE11的政务项目或者老站里嵌入这个时钟jQuery的ready函数和事件绑定确实是经验证的稳定方案。我的建议如果你不需要兼容老浏览器完全可以只用Vue Compostion API手写相关逻辑但如果你需要快速集成到既有jQuery老项目里这种混合模式是现实选择。5. 抖音风格的动画特效实现5.1 指针扫动的“秒杀”手感抖音上那些时钟特效指针转动往往不是平直的——它会带一个微弱的“回弹”或者“扫过”效果类似真实机械表的感觉。这个效果可以通过CSS过渡曲线来实现。普通的CSS动画曲线是ease-in-out也就是先加速再减速很平滑但没有特点。我尝试了自定义贝塞尔曲线cubic-bezier(0.22, 1, 0.36, 1)这个曲线后段减速非常短接近“快速到位轻微回弹”的感觉。#secondHand { transition: transform 1s cubic-bezier(0.22, 1, 0.36, 0.8); will-change: transform; }这里有个细节需要特别注意如果每秒钟都在旋转360度而不是从0度直接跳到6度那么当秒针从第59秒回到第0秒时角度是从354度跳到6度如果直接设置transform: rotate(6deg)CSS会判定从354度到6度是“逆时针旋转3度”导致秒针每周都会快速倒转一小段。解决方案是给角度做累加不让它归零回跳let cumulativeSecondDeg 0; function updateClock(timestamp) { const now new Date(); const seconds now.getSeconds(); const millis now.getMilliseconds(); // 不做取模处理始终沿用累加逻辑 cumulativeSecondDeg seconds * 6 millis * 0.006; $(#secondHand).css(transform, rotate(${cumulativeSecondDeg}deg)); }因为每秒钟都从当前秒数和毫秒算角度它天然不会超过360度再重置所以上面的归零回跳问题就不会发生。但如果你想做“扫过式”的秒针比如一秒内连续转动6度还是建议用累加角度变量。5.2 外圈刻度的呼吸光晕为了增加“抖音特效”的感觉我在时钟外圈加了一层缓慢旋转的渐变光晕。实现方式是一个CSS圆形面板用border画出半透明渐变再加一个缓慢旋转的keyframes动画.rotor-glow { width: 340px; height: 340px; border-radius: 50%; border: 2px solid rgba(255, 215, 130, 0.3); filter: drop-shadow(0 0 12px rgba(255, 215, 130, 0.4)); animation: slowRotate 12s linear infinite; pointer-events: none; } keyframes slowRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }这个光晕是用绝对定位置于时钟图层之下的不会挡住指针。动画时间设12秒是一个比较均衡的值——太快会让人注意力被光晕吸引太慢又看不出旋转效果。5.3 入场动画和节气切换动画整个组件第一次加载时我做了一个从中心扩散的入场动画罗盘从0.68倍大小逐渐放大到1倍同时透明度从0变到1。这个入场动画用transition就可以主要在Vue组件的mounted钩子里触发mounted() { this.$nextTick(() { document.querySelector(.clock-rotor-wrapper).classList.add(entrance-animate); }); }切换节气时右下角的节气信息面板会执行一个“翻牌”动画——旧数据向上卷出新数据从下方卷入。这个我用Vue的transition组件实现nameflip指定过渡类名transition nameflip div :keycurrentJieQiName classjieqi-panel {{ currentJieQiName }} /div /transition style .flip-enter-active { transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1); transform: translateY(20px); opacity: 0; } .flip-enter-to { transform: translateY(0); opacity: 1; } .flip-leave-active { transition: all 0.4s ease; transform: translateY(-20px); opacity: 0; } /style这个key绑定的技巧非常关键——当currentJieQiName变化时Vue会把旧组件销毁再创建新组件过渡效果才会触发。如果忘了加:keyVue只是更新文本内容动画不会生效。6. 常见问题与排查技巧实录6.1 节气文字方向不正确首次绘制罗盘时所有节气文字都是头朝右。因为fillText默认按当前坐标系角度渲染文字我旋转了坐标系之后文字也跟着旋转了。解决方式绘制文字之前先将坐标系旋转回正方向ctx.save(); ctx.translate(textX, textY); ctx.rotate(0); // 或者根据需求旋转180度让文字始终正向 ctx.fillText(name, 0, 0); ctx.restore(); ctx.restore();如果不追求每个字都正向而是让文字沿圆周方向排列类似车轮上的字则保留旋转即可两种效果看项目需求。6.2 秒针返回0点时出现快速倒转这其实就是上文说的“360度回跳”问题。我的建议是指针角度一律使用绝对角度不要对角度取模。换句话说rotate(720deg)与rotate(0deg)视觉一样但CSS动画过渡时rotate(720deg)是正向转两圈而rotate(0deg)是直接瞬移回原位。利用这一点你甚至可以让秒针在59秒时转到354度然后下一秒让它转到3606366度这样视觉上就是连续向前走而不是倒转。实现时可以让角度累加器始终增加不做求余let angleAccumulator 0; function updateClock(timestamp) { // 每秒角度变化6度Math.PI等效换算等等 angleAccumulator 6; #secondHand).css(transform, rotate(${angleAccumulator}deg)); }但如果浏览器标签页被切走一段时间再切回来requestAnimationFrame不会像setInterval一样把中间帧全部补执行可能导致角度累加速度异常。所以稳妥做法是每次根据当前时间重新算真实角度。6.3 Vue和jQuery在不合适时机操作DOM一个很典型的坑Vue的mounted里直接写$(.rotor-bg).animate(...)但此时子组件可能还没渲染完。因为mounted只代表当前组件的DOM就绪不代表所有子组件都准备好了。解决方式是使用this.$nextTick或者在子组件的mounted里触发事件// 父组件的mounted里 mounted() { this.$nextTick(() { // 确保父子组件都渲染完成后再初始化jQuery动画 this.initRotorEffects(); }); }另一个更稳妥的写法是在子组件RotorBackground的mounted中执行$emit(canvas-ready)父组件接受到该事件后再继续跑jQuery动画。6.4 节气计算库体积过大或加载失败lunar-javascript完整版体积约50KB左右如果项目对包体积敏感可以考虑只引入需要的模块。但直接用这个库最大的好处是省事且可靠我一般项目里就不做提升了。如果你实在想减小可以只引入节气计算模块并把农历相关代码Tree Shaking掉。如果生产环境中遇到加载失败多半是CDN地址不稳定。建议把库文件下载到本地静态目录从项目内部引用保证可靠性。提醒任何时候引入第三方库都先把库文件放到本地再用。依赖外部CDN等于把可用性交给了别人的服务器这在正式项目里是不可接受的。6.5 兼容性排查will-change和transform低端浏览器微信内置浏览器、安卓WebView对will-change: transform支持不完整有时会导致图层合成异常、出现闪屏。解决方法在不支持时去掉will-change只用transform加translateZ(0)开启硬件加速。#secondHand { transform: rotate(0deg) translateZ(0); backface-visibility: hidden; }这两个属性兼容性较好能强制把元素提升到自己的合成层降低重绘损耗。7. 进一步扩展的方向做完这个项目我最大的感受是传统民俗元素与前端动画结合的空间远比想象中大。节气只是第一个入口往下走还能加的东西太多了——宜读、黄历、日出日落时间、潮汐曲线、九宫飞星方位图等等全都可以往这个圆形罗盘上怼。技术层面也不复杂潮汐可以调用公共潮汐API日出日落可以用天文算法的简化公式稍微调整一下Canvas绘制逻辑就行。如果你想把这个时钟做成浏览器标签页插件思路也清晰把Vue组件抽成独立的Web Component或者挂载到Shadow DOM里样式隔离就不怕被宿主页面污染。做成Electron桌面小组件同理罗盘时钟放在桌面角落自动获取系统时间不需要服务端。最后提醒一点代码写得多不算本事写得清楚、易维护、能让人快速接手才是本事。这个项目里Vue负责数据的清晰流动jQuery负责快速落地视觉细节各得其所注释我建议写清楚“这段是在处理什么兼容问题”或“这个计算来自哪条天文公式”比写一堆“参数乘以2”要有用得多。我在实际操作中还有一个习惯每次打开项目先看自己画的罗盘上节气文字有没有位置偏移刻度是否均匀指针是否在正点位置。这些视觉细节相比算法正确性更容易被用户察觉别看只是几像素的差别体验差距是很大的。希望这篇拆解能帮你少踩几个坑。本文还有配套的精品资源点击获取
