# studyclock

**Repository Path**: h2ocl/studyclock

## Basic Information

- **Project Name**: studyclock
- **Description**: Studyclock 是中国广东省塘厦镇第二初级中学一位编程爱好者开发的便于住宿生查看晚修科目的数字时钟。使用HTML，JavaScript，CSS和Python语言编写。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://gitee.com/h2ocl/studyclock
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2026-04-04
- **Last Updated**: 2026-04-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: HTML, CSS, JavaScript, JSON, Python

## README

# StudyClock 部署教程

## 项目介绍

StudyClock 是中国广东省塘厦镇第二初级中学一位编程爱好者开发的便于住宿生查看晚修科目的数字时钟。使用HTML，JavaScript，CSS和Python语言编写。

StudyClock 是一个美观、功能丰富的时钟应用，具有以下特点：

- 多种时钟模式（时钟1、时钟3）
- 自定义背景图片（使用 Bing 每日一图）
- 实时天气显示（包含天气预警）
- 计时挑战功能
- 毛玻璃效果 UI
- 响应式设计

## 环境要求

### 系统要求
- Windows 7 及以上版本
- Linux（Ubuntu 18.04+、CentOS 7+ 等）
- macOS 10.14+（Mojave 及以上）

### 软件要求
- Python 3.7 及以上
- 浏览器（Chrome、Firefox、Edge 等现代浏览器）
- pip（Python 包管理工具）

### Python 依赖
- requests 库（用于获取天气和背景图片数据）

## 安装步骤

### 1. 克隆项目

如果您是从 Git 仓库获取项目，请执行以下命令：

```bash
git clone https://gitee.com/h2ocl/studyclock.git
cd studyclock
```

如果您是直接下载的项目压缩包，请解压到任意目录。

### 2. 安装 Python 依赖

打开终端（Windows 下为命令提示符或 PowerShell，Linux/macOS 下为终端），进入项目目录，执行以下命令：

```bash
pip install requests
```

### 3. 配置项目

项目已经配置完成，无需额外配置。如果您需要修改默认设置，可以编辑以下文件：

- `getweather/get_weather.py`：修改天气 API 配置
- `getbackground/get_background.py`：修改背景图片源配置
- `js/script.js`：修改前端逻辑

## 运行步骤

### Windows 系统

1. 双击运行 `run_all.bat` 文件
2. 脚本会自动：
   - 终止已有的 Python 进程
   - 运行 `getweather/get_weather.py`（获取天气数据）
   - 运行 `getbackground/get_background.py`（获取背景图片）
   - 启动天气服务器（端口 8000）
   - 启动背景图片服务器（端口 8001）
   - 打开 clock-1.html 和 clock-3.html 文件

### Linux / macOS 系统

#### 方法一：使用一键运行脚本（推荐）

1. 打开终端，进入项目目录
2. 执行以下命令：

   ```bash
   chmod +x run_all.sh  # 确保脚本有执行权限
   ./run_all.sh         # 运行一键脚本
   ```

3. 脚本会自动：
   - 终止已有的 Python 进程
   - 运行 `getweather/get_weather.py`（获取天气数据）
   - 运行 `getbackground/get_background.py`（获取背景图片）
   - 启动天气服务器（端口 8000）
   - 启动背景图片服务器（端口 8001）
   - 自动打开 clock-1.html 和 clock-3.html 文件

#### 方法二：手动运行

1. 打开终端，进入项目目录
2. 执行以下命令运行所有 Python 文件：

   ```bash
   # 运行 get_weather.py（获取天气数据）
   python3 getweather/get_weather.py
   
   # 运行 get_background.py（获取背景图片）
   python3 getbackground/get_background.py
   
   # 启动天气服务器
   python3 getweather/weather_server.py &
   
   # 启动背景图片服务器
   python3 getbackground/background_server.py &
   ```

3. 在浏览器中打开以下文件：
   - `clock-1.html`
   - `clock-3.html`

## 项目结构

```
studyclock/
├── css/               # CSS 样式文件
│   └── style.css      # 主样式文件
├── fonts/             # 字体文件
│   └── MiSans-Regular.ttf  # 小米字体
├── getbackground/     # 背景图片服务
│   ├── background_server.py  # 背景图片服务器
│   └── get_background.py     # 背景图片获取逻辑
├── getweather/        # 天气服务
│   ├── get_weather.py        # 天气数据获取逻辑
│   └── weather_server.py     # 天气服务器
├── js/                # JavaScript 文件
│   ├── plan.js        # 计划相关逻辑
│   ├── plan1.js       # 计划相关逻辑
│   ├── plan3.js       # 计划相关逻辑
│   └── script.js      # 主逻辑文件
├── clock-1.html       # 时钟1页面
├── clock-3.html       # 时钟3页面
├── run_all.bat        # Windows 一键运行脚本
├── run_all.sh         # Linux/macOS 一键运行脚本
├── README.md          # 项目说明
└── LICENSE            # 许可证
```

## 服务说明

### 天气服务器
- 运行端口：8000
- 访问地址：http://localhost:8000/weather
- 功能：提供实时天气数据，包括温度、天气状况和天气预警

### 背景图片服务器
- 运行端口：8001
- 访问地址：http://localhost:8001/background
- 功能：提供背景图片，优先使用 Bing 每日一图，失败时使用备用图片源

## 常见问题及解决方案

### 1. 端口被占用

**症状**：启动服务器时出现 "OSError: [WinError 10048] 通常每个套接字地址(协议/网络地址/端口)只允许使用一次" 错误。

**解决方案**：
- Windows：运行 `run_all.bat` 文件，它会自动终止已有的 Python 进程
- Linux/macOS：使用 `lsof -i :8000` 和 `lsof -i :8001` 查看占用端口的进程，然后使用 `kill` 命令终止它们

### 2. 依赖安装失败

**症状**：执行 `pip install requests` 时出现错误。

**解决方案**：
- 检查网络连接
- 尝试使用国内镜像源：`pip install -i https://pypi.tuna.tsinghua.edu.cn/simple requests`

### 3. 背景图片获取失败

**症状**：页面背景显示默认颜色，控制台出现 "获取背景图片失败" 错误。

**解决方案**：
- 检查网络连接
- 确保 `getbackground/background_server.py` 正在运行
- 尝试访问 http://localhost:8001/background 查看是否返回图片 URL

### 4. 天气数据获取失败

**症状**：页面底部天气显示 "获取失败" 或不显示天气信息。

**解决方案**：
- 检查网络连接
- 确保 `getweather/weather_server.py` 正在运行
- 尝试访问 http://localhost:8000/weather 查看是否返回天气数据

### 5. 浏览器兼容性问题

**症状**：页面显示异常或功能失效。

**解决方案**：
- 使用现代浏览器（Chrome、Firefox、Edge 等）
- 确保浏览器版本较新

## 故障排除

如果遇到其他问题，可以：

1. 检查服务器日志，查看是否有错误信息
2. 检查浏览器控制台，查看是否有 JavaScript 错误
3. 确保所有文件路径正确，没有缺少文件
4. 确保 Python 版本符合要求（3.7+）

## 许可证

本项目采用 MIT 许可证，详见 LICENSE 文件。