一、表盘核心亮点

这款表盘不仅能显示实时时间，还具备以下实用特性：

• 视觉吸睛：红、黄、蓝、紫四色进度环分别对应日期、小时、分钟、秒数，动态展示时间流逝；
• 交互友好：鼠标悬停某一模块（如日期、分钟），该模块高亮显示，其他模块弱化，信息查看更清晰；
• 即下即用：无需安装依赖，下载后直接上传服务器或本地打开即可运行；
• 灵活嵌入：支持通过 iframe 插入网站侧边栏、首页或自定义页面，适配各种布局；

二、使用步骤

1. 下载表盘文件

在文章底部获取完整的表盘文件（color-clock.html）

2. 本地测试（可选）

下载后，双击文件 color-clock.html，用浏览器打开即可即可看到实时运行的彩色表盘。

• 实时显示当前时间、日期及星期；
• 鼠标悬停 “日期”“小时”“分钟”“秒数” 模块，体验高亮交互；
• 进度条随时间动态变化，直观呈现一天中的时间占比。

3. 嵌入网站使用

将下载的 color-clock.html 上传到你的网站服务器（如放在 clock 文件夹下），通过以下方式嵌入任意页面：

方法 1：iframe 直接嵌入（推荐）

在网站编辑器中插入 iframe 代码，示例：

<iframe src="https://你的域名/clock/color-clock.html" width="300" height="300" frameborder="0"></iframe>

• 可根据页面布局调整 width（宽度）和 height（高度）参数；
• frameborder="0" 用于隐藏边框，更美观。

方法 2：作为独立页面使用

直接将文件上传到网站根目录，通过链接 https://你的域名/color-clock.html 访问，可作为单独的 “时间页面” 嵌入导航菜单。

三、自定义技巧：按需调整样式（可选）

若想让表盘更贴合网站风格，可用记事本或代码编辑器打开下载的 color-clock.html 文件，修改以下内容：

1. 更改进度条颜色

找到代码中 <lineargradient> 标签（如红色进度环的 id="pc-red"），替换 stop-color 后的颜色值（支持十六进制、RGB 格式）：

<!-- 示例：将红色进度环改为绿色 -->
<lineargradient id="pc-red" x1="1" y1="0.5" x2="0" y2="0.5">
    <stop offset="0%" stop-color="#4CAF50"></stop>
    <stop offset="100%" stop-color="#8BC34A"></stop>
</lineargradient>

2. 调整表盘尺寸

搜索 .progress-clock 样式，调整 width 和 height 值（默认 16em），例如改为 20em 放大表盘：

.progress-clock {
    width: 20em; /* 放大表盘 */
    height: 20em;
}

3. 隐藏不需要的模块

• 隐藏日期：删除 <button class="progress-clock__time-date"...></button> 整个标签；
• 隐藏上午 / 下午：删除 <span class="progress-clock__time-ampm"...></span> 标签。

四、使用场景推荐

• 个人博客侧边栏：作为个性化时间组件，替代传统文字时钟；
• 网站首页顶部 / 底部：增加页面动态元素，吸引访客注意；
• 会员中心 / 个人主页：作为装饰性组件，增强页面设计感。

下载后即可快速部署，无需复杂操作，轻松为网站添加一款高颜值时间组件！