50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock（主题时钟）

📅 我们继续 50 个小项目挑战！—— ThemeClock组件

仓库地址：https://github.com/SunACong/50-vue-projects

项目预览地址：https://50-vue-projects.vercel.app/

---

使用 Vue 3 的 Composition API 和 <script setup> 语法结合 TailwindCSS 构建一个能够动态切换主题（深色与浅色）的时钟组件。该组件不仅显示当前时间（包括小时、分钟和秒），还展示了今天的日期和星期。

---

🎯 组件目标

• 动态切换主题（深色/浅色）
• 显示当前的时间（小时、分钟、秒针）
• 展示今日日期和星期
• 使用 CSS 变换实现指针旋转效果
• 基于 Vue 3 和 TailwindCSS 实现响应式设计

⚙️ 技术实现点

技术点	描述
Vue 3 Composition API (<script setup>)	使用响应式变量管理组件状态
ref 响应式变量	控制时间状态、主题模式
onMounted 和 onUnmounted 生命周期钩子	定时更新时间状态
TailwindCSS 自定义样式	快速构建现代 UI 界面
@click 事件绑定	切换主题逻辑

---

🧱 组件实现

模板结构 <template>

<template><div:class="['min-h-screen',theme === 'dark' ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-900','flex flex-col items-center justify-center',]"><!-- 主题切换按钮 --><button@click="toggleTheme":class="['mb-8 rounded-md p-2',theme === 'dark' ? 'bg-gray-700 hover:bg-gray-600' : 'bg-white hover:bg-gray-200',]">{{ theme === 'dark' ? '切换至浅色主题' : '切换至深色主题' }}</button><!-- 时钟容器 --><div class="relative h-64 w-64"><!-- 表盘 --><div:class="['absolute inset-0 rounded-full',theme === 'dark' ? 'bg-gray-800' : 'bg-white',]"><!-- 时针、分针、秒针及中心圆点 --><!-- ... (省略部分代码) ... --></div></div><!-- 日期与星期 --><div:class="['mt-8 text-xl font-semibold',theme === 'dark' ? 'text-gray-300' : 'text-gray-800',]">{{ currentDate }} {{ currentDay }}</div></div>
</template>

脚本逻辑 <script setup>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'// 主题切换
const theme = ref('dark')
const toggleTheme = () => {theme.value = theme.value === 'dark' ? 'light' : 'dark'
}// 时间状态
const hoursRotation = ref(0)
const minutesRotation = ref(0)
const secondsRotation = ref(0)
const currentDate = ref('')
const currentDay = ref('')// 更新时间函数
const updateTime = () => {const now = new Date()const hours = now.getHours()const minutes = now.getMinutes()const seconds = now.getSeconds()const hoursForClock = hours % 12hoursRotation.value = hoursForClock * 30 + minutes * 0.5minutesRotation.value = minutes * 6 + seconds * 0.1secondsRotation.value = seconds * 6console.log(hoursRotation.value, minutesRotation.value, secondsRotation.value)const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']currentDate.value = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`currentDay.value = days[now.getDay()]
}// 启动定时器
let interval = null
onMounted(() => {updateTime()interval = setInterval(updateTime, 1000)
})// 清除定时器
onUnmounted(() => {clearInterval(interval)
})
</script>

---

🔍 重点效果实现

✅ 动态主题切换

通过 theme 变量来控制整个应用的主题，并且根据其值动态修改类名：

:style="{transform: `translateY(-50%) rotate(${hoursRotation - 90}deg)`,
}"

当用户点击“切换主题”按钮时，调用 toggleTheme() 方法切换主题模式。

💡 指针旋转动画

使用 CSS 变换来实现指针的旋转效果。例如，时针的旋转角度计算如下：

hoursRotation.value = hoursForClock * 30 + minutes * 0.5

每个小时对应的角度是 30 度（360度/12小时），并且为了更加精确，我们还会加上由分钟数决定的部分角度。

🖼️ 日期与星期展示

利用 JavaScript 的 Date 对象获取当前的日期和星期，然后以友好的格式展示给用户：

currentDate.value = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()
).padStart(2, '0')}`
currentDay.value = days[now.getDay()]

你说得对，让我们补充一下 🎨 TailwindCSS 样式重点讲解 部分，详细解释在这个时钟组件中使用的 TailwindCSS 类及其作用。

---

🎨 TailwindCSS 样式重点讲解

以下是针对该时钟组件所用到的 TailwindCSS 工具类的详细解释：

类名	作用
min-h-screen	设置最小高度为视口高度，确保组件至少占据整个屏幕的高度。
bg-gray-900 text-white / bg-gray-100 text-gray-900	分别设置背景颜色和文本颜色，前者用于深色主题，后者用于浅色主题。
flex flex-col items-center justify-center	使用 Flexbox 布局，使内容垂直和水平居中，并按列排列。
mb-8 rounded-md p-2	外边距底部设为 mb-8，圆角设为 rounded-md，内边距设为 p-2。
bg-gray-700 hover:bg-gray-600 / bg-white hover:bg-gray-200	按钮的背景颜色及悬停时的颜色变化，分别对应深色和浅色主题下的样式。
relative h-64 w-64	设置相对定位，宽高均为 64 单位，用于创建一个固定大小的表盘容器。
absolute inset-0 rounded-full	绝对定位并铺满父容器，同时将元素裁剪成圆形。
h-1 w-1/4 origin-left rounded-full bg-current	定义时针的宽度、长度、旋转中心点以及圆角样式。bg-current 表示使用当前元素的文字颜色作为背景颜色。
translateY(-50%) rotate(${hoursRotation - 90}deg)	利用 CSS 变换函数调整指针的位置和旋转角度。
h-px w-1/2 origin-left rounded-full bg-red-500	秒针的特殊样式，其中 h-px 创建了一个极细的秒针，bg-red-500 设置了红色。
h-3 w-3 -translate-x-1/2 -translate-y-1/2 transform rounded-full	中心圆点的样式，通过平移将其精确放置在表盘中心。
text-xl font-semibold	设置日期与星期部分的字体大小和粗细。
text-gray-300 / text-gray-800	根据主题模式设置日期与星期部分的文本颜色。

📁 常量定义 + 组件路由

constants/index.js 添加组件预览常量：

{id: 19,title: 'Theme Clock',image: 'https://50projects50days.com/img/projects-img/19-theme-clock.png',link: 'ThemeClock',},

router/index.js 中添加路由选项：

{path: '/ThemeClock',name: 'ThemeClock',component: () => import('@/projects/ThemeClock.vue'),},

---

📁 扩展功能

此组件可以进一步扩展的功能包括：

• 自定义表盘样式：可以根据个人喜好调整表盘的颜色、大小等。
• 添加闹钟或倒计时功能：为时钟组件增加实用功能。
• 国际化支持：支持多语言，特别是日期和星期的本地化。
• 响应式设计：优化不同屏幕尺寸下的显示效果。

---

🏁 总结

👉 下一篇，我们将完成ButtonRippleEffect组件，一个简单的按钮组件，点击有水波的效果。🚀