English | 简体中文

高考倒计时

一个简洁美观的高考倒计时单页应用，支持正计时与在线背景，自动计算下一年高考时间。

一个简洁美观的高考倒计时/正计时单页应用，开箱即用。支持自定义目标时间、联系方式与样式，既可纯静态使用，也可配合后端实现自动年份切换与在线管理，适合部署到本地或任何静态网站托管平台。

本项目已支持：

• 正计时模式（从指定时间开始计时，默认为高考）
• 在线背景加载与并发竞速（优先 Bing 镜像，超时自动换源，网络差则回落本地）
• 后端自动计算下一年的高考时间（无需手动改年份）
• 管理后台在线配置标题、时间与描述
• 视觉效果：玻璃球、下雪等装饰元素与全屏滚动切换
• 液态玻璃效果（基于 LGGC，仅需添加 class="lggc" 即可获得苹果风格液态玻璃 UI）
• 联系方式区块：支持邮箱、QQ、微信等方式展示

• Gitee（主仓库）：https://gitee.com/HunLi-Xl/Gaokao_time
• 历史链接（页面中可能仍引用）：https://gitee.com/dmy_awa_admin/Gaokao_time （建议改为上面的主仓库）

如需提交 Issue/PR，请在主仓库进行。

• 正计时展示：从指定时间开始计时，精准到秒（默认 2026-06-07 09:00:00）
• 视觉效果：玻璃球、下雪等装饰元素与全屏滚动切换
• 液态玻璃 UI：基于 LGGC（仅添加 class="lggc" 即可），标题、计时器、联系信息容器与社交图标均已应用
• 在线背景：优先 Bing 镜像，3 秒超时自动换源，网络差时回落本地图片
• 后端管理：自动计算下一年高考时间，在线配置标题、时间与描述
• 纯前端静态：无需后端也可直接双击 timeGo.html 使用
• 易于自定义：日期、标题、文案、样式均可快速修改

Gaokao_time-main/
├─ timeGo.html               # 主页（正计时与联系信息）
├─ backend/
│  ├─ server.js              # 后端服务器（Node.js，自动计算下一年高考时间）
│  ├─ config.json            # 配置文件（标题、时间、描述）
│  └─ README.md              # 后端使用说明
├─ css/
│  ├─ newtimestyle.css       # 站点主要样式（含 .bg-container 与 .countup）
│  ├─ fullpage.css           # 全屏滚动样式
│  ├─ font-awesome.min.css   # 字体图标样式
│  └─ BG/                    # 背景图片目录（本地轮换图片）
├─ js/
│  ├─ scripttime.js          # 页面交互逻辑（正计时、在线背景、并发竞速）
│  ├─ countdown.min.js       # 倒计时库
│  ├─ jquery.min.js          # jQuery
│  ├─ jquery.fullpage.min.js # 全屏滚动库
│  └─ three.canvas.js        # 动效相关库
├─ images/                   # 其他图片资源（含装饰图）
├─ fonts/                    # Font Awesome 字体资源
├─ Other/                    # 其他附加资源（可选）
├─ LICENSE                   # 开源协议
└─ README.md                 # 项目说明文档（本文件）

• 本地静态预览：

  1. 下载仓库或解压到任意目录
  2. 双击 timeGo.html 用浏览器打开即可（默认正计时）

• 启动后端（推荐）：

  1. 进入项目根目录
  2. 运行 node backend/server.js
  3. 浏览器访问 http://localhost:3000
  4. 管理后台：http://localhost:3000/admin
  • 后端会自动计算下一年的高考时间（无需手动改年份）
  • 可通过管理后台修改标题、时间、描述

• 静态托管部署（任选其一）：

  • GitHub Pages / Gitee Pages / Netlify / Vercel / 静态服务器（Nginx/Apache 等）
  • 将整个项目目录上传到托管服务或服务器的站点目录下即可访问

• 建议使用现代浏览器直接打开 timeGo.html 进行快速预览
• 若需模拟线上路径或避免跨域问题，可使用本地静态服务器（任选其一）：
  • VS Code 插件 Live Server 一键预览
  • Python: python -m http.server 8080（需已安装 Python）
  • Node: npx http-server . -p 8080（需已安装 Node.js）
  • 推荐直接启动后端：node backend/server.js，会同时提供静态服务与管理后台

1. 修改正计时起点时间与标题（推荐通过后端管理）

• 后端自动计算：启动 node backend/server.js 后，访问 http://localhost:3000/admin

• 在管理后台修改标题、开始时间、描述即可，前端会实时生效

• 时间格式：YYYY MM DD HH:MM:SS（空格分隔，时分秒用冒号）

• 后端会根据当前日期自动选择下一年的 6 月 7 日 09:00:00 作为默认高考时间

• 手动修改（不推荐）：

  • 打开 timeGo.html：
    • 修改标题：... 与页面

      ...

    • 修改时间：在
      中填入时间
  • 若使用后端，前端会在加载时用后端配置覆盖这些值

2. 在线背景与本地背景

• 在线背景：js/scripttime.js 中的 candidateList 默认每次随机加载在线壁纸
  • 候选源：Bing 镜像、Unsplash、Picsum 等
  • 并发竞速：最多同时尝试 2 个源，3 秒超时，失败自动切换下一个
  • 本地兜底：网络失败后自动使用 css/BG 下的本地图片
• 每日稳定顺序：访问时带 ?bg=daily 参数，则按日期哈希选择源，每天固定
• 每次随机：带 ?bg=random 或默认行为，每次打开都不同

3. 修改联系方式

• 在 timeGo.html 的“联系方式”区块内替换 QQ、微信、邮箱等文案与链接
• 注意：源码中“源码仓库”图标的 a 标签有一处写成了 herf，应改为 href 以确保可点击； 同时建议将仓库链接替换为主仓库：https://gitee.com/HunLi-Xl/Gaokao_time

4. 视觉与样式调整

• 全局样式主要在 css/newtimestyle.css 中，可根据需要调整颜色、布局、动效

5. 液态玻璃效果（LGGC）

• 已集成在 main/css/lggc.css，通过给元素添加 class="lggc" 即可启用液态玻璃 UI
• 可通过 CSS 变量微调外观：
  • --lggc-radius：圆角
  • --lggc-padding：内边距
  • --lggc-bg：玻璃底色（半透明）
  • --lggc-border：边框颜色
  • --lggc-blur：模糊强度
  • --lggc-highlight：高光颜色
• 示例：

  <div class="lggc" style="--lggc-radius:28px;--lggc-padding:1.25rem 1.5rem;--lggc-bg:rgba(255,255,255,0.18);">
    自定义液态玻璃
  </div>
  
• 顶部光效与玻璃球叠层位于 newtimestyle.css 中的 .top-light 与 .glass-ball 选择器

页面引用了外部样式/脚本：

• https://wuzuhua.wuzuhua.cn/gkdjs/css/mystyle.css
• https://wuzuhua.wuzuhua.cn/gkdjs/js/mynavbar.js

为确保离线可用与 HTTPS 环境下的稳定加载，建议：

• 将上述文件下载到本地并改为相对路径引用；或
• 替换为你可控且支持 HTTPS 的 CDN/静态资源地址。

• 现代浏览器（Chrome、Edge、Firefox、Safari 等最新版）
• 项目基于原生 HTML5/CSS3/ES 标准与常用前端库实现，不依赖非标准 API

• 技术栈：纯前端静态页面 + jQuery 生态部分库 + Node.js 后端
• 代码组织：HTML/CSS/JS 分离；请保持语义化与可维护性
• 质量建议：
  • 修改脚本前先阅读 js/scripttime.js 初始化与交互逻辑
  • 后端为纯 Node.js 单文件，无需 npm，直接运行 node backend/server.js
  • 若自建工程，可接入 ESLint/Stylelint 做规范校验

• 无需 npm 依赖，直接使用 Node.js 运行：
  • 启动：node backend/server.js
  • 默认端口 3000，可通过环境变量 PORT 修改（例如 PORT=8080 node backend/server.js）
• API：
  • GET /api/config：获取配置（自动计算下一年的高考时间）
  • POST /api/config：更新配置（JSON body）
• 管理后台：http://localhost:3000/admin
  • 可在线修改标题、开始时间与描述，前端刷新后生效

1. 为什么没有显示或样式错乱？

• 可能因外链资源加载失败；请参考“离线可用性与稳定性”章节本地化相关文件
• 若启动了后端，确保访问 http://localhost:3000，而不是直接双击 html 文件

2. 背景加载慢或不显示？

• 在线背景默认并发竞速，3 秒超时自动换源；网络差时会回落到本地图片
• 确保本地图片存在于 css/BG 目录，并检查浏览器控制台是否有网络错误
• 若需固定本地背景，可在 js/scripttime.js 中移除在线源或注释掉在线逻辑

3. 前端时间没有自动更新到下一年？

• 确保后端服务正在运行（node backend/server.js）
• 刷新页面，前端会从 /api/config 获取最新配置（包含自动计算的下一年的高考时间）
• 管理后台 http://localhost:3000/admin 会显示当前配置与时间

4. 管理后台无法访问？

• 确保在项目根目录（包含 timeGo.html）下启动后端，否则静态资源无法访问
• 检查端口 3000 是否被占用，或指定其他端口（例如 PORT=8080 node backend/server.js）

5. 如何切换回倒计时模式？

• 将 timeGo.html 中的
  改为
• 同时在 js/scripttime.js 中补充倒计时逻辑，或恢复原始的倒计时库调用

• Issue：欢迎就功能建议、缺陷反馈在主仓库提交 Issue
• PR：欢迎提交 Pull Request（请尽量保持代码风格一致，避免引入未使用的依赖）
• 讨论：如需新增功能或大改动，建议先开 Issue 讨论设计方案

• 页面在 timeGo.html 中默认展示了一组联系方式（QQ/微信/邮箱），可按需替换为你的信息

• 本项目遵循仓库中的 LICENSE 文件（以实际内容为准）

• jQuery (jquery.min.js)
• fullPage.js (jquery.fullpage.min.js)
• Countdown.js (countdown.min.js)
• Three.js canvas 相关实现 (three.canvas.js)
• Font Awesome（字体与图标）
• LGGC: Liquid Glass by GuoChen（液态玻璃 CSS 效果，本项目 css/lggc.css 即来自该库）

如果你在使用或二次开发过程中遇到问题，欢迎提交 Issue 或 PR。祝你金榜题名！