logo
0
0
WeChat Login

English | 简体中文

高考倒计时

主题 HTML5 CSS3 JavaScript Node.js

Auth cnb

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


✨ 项目介绍

高考倒计时(高中版)

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

本项目已支持:

  • 正计时模式(从指定时间开始计时,默认为高考)
  • 在线背景加载与并发竞速(优先 Bing 镜像,超时自动换源,网络差则回落本地)
  • 后端自动计算下一年的高考时间(无需手动改年份)
  • 管理后台在线配置标题、时间与描述
  • 视觉效果:玻璃球、下雪等装饰元素与全屏滚动切换
  • 联系方式区块:支持邮箱、QQ、微信等方式展示

仓库地址

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

功能特性

  • 正计时展示:从指定时间开始计时,精准到秒(默认 2026-06-07 09:00:00)
  • 视觉效果:玻璃球、下雪等装饰元素与全屏滚动切换
  • 在线背景:优先 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:
      • 修改标题:... 与页面

        ...

      • 修改时间:在
        中填入时间
    • 若使用后端,前端会在加载时用后端配置覆盖这些值
  1. 在线背景与本地背景
  • 在线背景:js/scripttime.js 中的 candidateList 默认每次随机加载在线壁纸
    • 候选源:Bing 镜像、Unsplash、Picsum 等
    • 并发竞速:最多同时尝试 2 个源,3 秒超时,失败自动切换下一个
    • 本地兜底:网络失败后自动使用 css/BG 下的本地图片
  • 每日稳定顺序:访问时带 ?bg=daily 参数,则按日期哈希选择源,每天固定
  • 每次随机:带 ?bg=random 或默认行为,每次打开都不同
  1. 修改联系方式
  • 在 timeGo.html 的“联系方式”区块内替换 QQ、微信、邮箱等文案与链接
  • 注意:源码中“源码仓库”图标的 a 标签有一处写成了 herf,应改为 href 以确保可点击; 同时建议将仓库链接替换为主仓库:https://gitee.com/HunLi-Xl/Gaokao_time
  1. 视觉与样式调整
  • 全局样式主要在 css/newtimestyle.css 中,可根据需要调整颜色、布局、动效
  • 顶部光效与玻璃球叠层位于 newtimestyle.css 中的 .top-light 与 .glass-ball 选择器

离线可用性与稳定性(外链说明)

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

为确保离线可用与 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
    • 可在线修改标题、开始时间与描述,前端刷新后生效

常见问题(FAQ)

  1. 为什么没有显示或样式错乱?
  • 可能因外链资源加载失败;请参考“离线可用性与稳定性”章节本地化相关文件
  • 若启动了后端,确保访问 http://localhost:3000,而不是直接双击 html 文件
  1. 背景加载慢或不显示?
  • 在线背景默认并发竞速,3 秒超时自动换源;网络差时会回落到本地图片
  • 确保本地图片存在于 css/BG 目录,并检查浏览器控制台是否有网络错误
  • 若需固定本地背景,可在 js/scripttime.js 中移除在线源或注释掉在线逻辑
  1. 前端时间没有自动更新到下一年?
  • 确保后端服务正在运行(node backend/server.js
  • 刷新页面,前端会从 /api/config 获取最新配置(包含自动计算的下一年的高考时间)
  • 管理后台 http://localhost:3000/admin 会显示当前配置与时间
  1. 管理后台无法访问?
  • 确保在项目根目录(包含 timeGo.html)下启动后端,否则静态资源无法访问
  • 检查端口 3000 是否被占用,或指定其他端口(例如 PORT=8080 node backend/server.js
  1. 如何切换回倒计时模式?
  • 将 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(字体与图标)

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


Fork 历史趋势图。

About

一个纯前端的高考倒计时单页应用,开箱即用。支持自定义目标考试时间、联系方式与样式,适合部署到本地或任何静态网站托管平台。 本项目已支持:每日自动更换背景图(本地轮换,无需外部服务)。

35.94 MiB
12.64 KiB
0 forks0 stars1 branches0 TagREADMEGPL-2.0 license
Language
CSS59.5%
JavaScript21.8%
HTML18.7%