# Flip Clock

**Repository Path**: hyz2xx/flip-clock

## Basic Information

- **Project Name**: Flip Clock
- **Description**: 一个优雅的网页翻页时钟应用，支持多种主题切换、全屏显示以及阳历/农历日期显示。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-11-25
- **Last Updated**: 2025-07-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 多主题翻页时钟 (Flip Clock)

一个优雅的网页翻页时钟应用，支持多种主题切换、全屏显示以及阳历/农历日期显示。

## ✨ 特性

- 💫 流畅的翻页动画效果
- 🎨 丰富的主题选择
- 📱 响应式设计，完美适配各种屏幕
- 🖥️ 支持全屏显示模式
- 📅 支持阳历和农历日期显示
- 💾 主题选择自动保存

## 🎨 主题列表

- 经典主题 - 深灰色调
- 暗黑主题 - 深青灰色调
- 明亮主题 - 纯净白色
- 日落主题 - 温暖橙色
- 海洋主题 - 清新蓝色
- 森林主题 - 自然绿色
- 紫色主题 - 典雅紫色
- 咖啡主题 - 温暖棕色
- 护眼主题 - 柔和绿色

## 🛠️ 技术栈

- 原生 JavaScript
- HTML5
- CSS3
- Lunar-JavaScript (农历日期计算)

## 💡 主要功能

### 时钟显示
- 24小时制时间显示
- 平滑的翻页动画效果
- 自适应屏幕大小的数字显示

### 主题系统
- 9种精心设计的主题
- 主题实时预览
- 使用 LocalStorage 持久化保存主题选择
- 主题切换时的平滑过渡动画

### 全屏模式
- 支持一键切换全屏显示
- 多浏览器兼容的全屏 API
- 全屏状态指示图标

### 日期显示
- 完整阳历日期显示（年月日星期）
- 农历日期显示
- 半透明磨砂玻璃效果
- 主题自适应的日期样式

## 🚀 使用方法

1. 直接打开 `index.html` 文件即可运行
2. 点击右上角主题按钮可以切换不同主题
3. 点击右上角全屏按钮可以进入/退出全屏模式
4. 页面底部显示当前的阳历和农历日期

## 💻 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 10+
- Edge 79+

## 🔧 开发说明

项目使用纯原生技术栈开发，无需构建工具，主要文件说明：

- `index.html`: 主要的 HTML 结构
- `style.css`: 所有样式定义，包括主题和动画
- `script.js`: JavaScript 功能实现
- `lunar.js`: 农历日期计算库（CDN 引入）

## 📝 待优化项目

- [ ] 添加自定义主题功能
- [ ] 支持时区选择
- [ ] 添加更多动画效果
- [ ] 优化移动端体验
- [ ] 添加更多日期格式选项

## 📄 许可证

MIT License - 可以自由使用、修改和分发