# salary-clock

**Repository Path**: hujunwei-dev/salary-clock

## Basic Information

- **Project Name**: salary-clock
- **Description**: No description available
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-04-30
- **Last Updated**: 2026-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🪙 打工人的财富时钟

> 输入月薪，实时看你每时每刻赚了多少钱，附带撒金币特效！

## 📸 效果预览

### 初始界面

打开页面后，输入月薪前的初始状态——暗黑科技感界面，金色主题色调，等待你输入薪资数据：

![初始界面](screenshots/01-initial-blank.png)

### 实时运行效果

输入月薪（如 20,000 元）后确认，核心数字区实时跳动显示本月累计收入，背景金币持续飘落：

![运行效果](screenshots/02-running-state.png)

下方六个信息面板同步展示时薪、日薪、本月工作日、本月应得、年薪及距离下班时间：

![完整面板](screenshots/03-with-salary.png)

## ✨ 功能特性

| 功能 | 说明 |
|------|------|
| 💰 **实时工资计算** | 输入月薪后，根据中国工作日历实时显示每秒赚了多少钱，精确到分 |
| 📅 **中国工作日历** | 遵循国务院法定节假日安排，支持调休上班日识别（API + 静态数据 fallback） |
| ⏰ **工作时间判定** | 9:00 - 18:00（9小时），非工作时间计数器自动冻结 |
| 🪙 **撒金币动画** | 背景 Canvas 持续飘落金币粒子，每赚满 100 元触发爆发特效 |
| 💾 **自动记忆恢复** | localStorage 保存月薪设置，刷新页面自动恢复 |
| 🌐 **零依赖单文件** | 纯 HTML + CSS + JavaScript，双击浏览器即可使用，无需安装任何东西 |
| 📱 **响应式适配** | 自动适配桌面和移动端屏幕尺寸 |

## 🚀 使用方法

1. **双击** `salary-clock.html` 在浏览器中打开
2. **输入** 你的月薪（如 20000），按 **回车** 或点击「确认」按钮
3. **看着数字跳动，金币飘落！**

> 💡 月薪设置会自动保存，下次打开无需重新输入。

## 📊 显示信息详解

| 指标 | 计算方式 | 显示示例 |
|------|----------|----------|
| 当前累计收入 | 本月所有工作时间的已赚金额，实时跳动 | ¥19,816.73 |
| 时薪 | 月薪 ÷ 当月工作日数 ÷ 9小时 | ¥105.82/小时 |
| 日薪 | 时薪 × 9小时 | ¥952.38/天 |
| 本月工作日 | 已过工作日 / 总工作日数 | 21/21天 |
| 本月应得 | 月薪总额 | ¥20,000.00 |
| 年薪 | 月薪 × 12 | ¥240,000.00 |
| 距离下班 | 实时倒计时，下班后显示「已下班」，休息日显示「休息日」 | 1小时44分 |

## 🎨 设计风格

- **暗黑科技感**：深色背景（#0a0a0f）搭配金色主题（#ffd700），金融终端视觉风格
- **数字发光脉冲**：核心收入数字带 text-shadow 动画，呼吸灯般跳动
- **金币粒子系统**：Canvas 绘制带 ¥ 符号的金币，径向渐变光泽，重力下落 + 旋转 + 淡出
- **信息面板**：毛玻璃效果卡片，hover 时金色边框高亮 + 微上浮动画

## 🔧 计算逻辑

### 工资计算公式

```
时薪 = 月薪 / 当月实际工作日数 / 9（小时）
秒薪 = 时薪 / 3600
累计收入 = 本月已工作秒数 × 秒薪
```

### 工作日判定（三层 Fallback）

1. **第一层**：从 timor.tech API 获取当年中国节假日数据
2. **第二层**：内置 2025-2026 年静态节假日数据（国务院官方安排）
3. **第三层**：纯周末判断（周一至周五 = 工作日）

> 支持调休上班日识别——周六周日标记为「班」的视为工作日。

### 时钟同步机制

- **requestAnimationFrame**：驱动流畅的逐帧更新
- **setInterval(1000ms)**：每秒与系统时钟同步，防止标签页后台导致的漂移
- 标签页恢复可见时立即重算，确保数据准确

## 🛠️ 技术栈

| 技术 | 用途 |
|------|------|
| HTML + CSS + JavaScript | 单文件自包含，零外部依赖 |
| Canvas 2D | 金币粒子动画系统 |
| requestAnimationFrame + setInterval | 双保险时钟同步 |
| localStorage | 月薪设置持久化 |
| timor.tech API + 静态数据 | 中国节假日数据三层 fallback |

## 📄 许可

MIT License