- 显示距离高考的剩余天数
- 动态更新时间
- 简洁的用户界面
今年的高考过后,自动切换到下一年。详见下方运行示例图。
示例站点:https://blog.xingchencloud.top/gkdjs.html
克隆本仓库
git clone https://github.com/Gasolcloudteam/Countdown对于新手和特别在意硬盘空间占用的人:请克隆完毕后自行删除除了 index.html gk.css gk.js 以外的其他文件,只需要保留这三个文件即可运行。
背景可以自行更改,见 gk.css 里面的 background-image: url('https://api.paugram.com/bing'); 这里默认使用保罗的Bing每日壁纸API。
如果遇到突发情况(比如前几年新冠)导致高考时间调整,可自行更改相关代码。本代码可以直接编辑保存后在浏览器打开查看,也可以自己部署到服务器绑定域名随时查看,如果您是老师,可以将其作为班级教学电脑桌面壁纸。
视觉风格优化
- 字体升级:使用系统字体栈(
system-ui+ CJK 字体),替代原来的 Arial,提升中文显示清晰度 - 遮罩层重做:将纯白色遮罩改为深色渐变遮罩(上 15% → 下 55%),背景图片更通透
- 移除彩虹色循环动画,改为纯白色文字 + text-shadow 保证可读性
- 所有文字添加
text-shadow,在动态背景上保持清晰 - 开启字体平滑(
-webkit-font-smoothing: antialiased) - 添加
prefers-reduced-motion无障碍支持
倒计时数字凸显
- 将倒计时从一行文字(
48时 45分 32秒)重构为四张独立卡片 - 每张卡片:深色半透明背景 + 毛玻璃模糊(
backdrop-filter: blur(8px))+ 细边框 + 圆角 - 数字使用 monospace 字体,最大 64px 加粗显示
- 单位标签(天/时/分/秒)小号半透明,不抢视觉焦点
- 窄屏自动换行(
flex-wrap: wrap)
页脚改进
- 添加底部渐变背景,与遮罩层自然过渡
- 链接添加 hover 下划线和 focus-visible 焦点环(无障碍)
- 文字颜色适配深色背景
自动切换逻辑确认
- 高考期间(6月7日-9日)自动显示祝福语
- 高考结束后(6月9日18:00)自动切换到下一年倒计时
- 逻辑无需修改,已验证正确
代码清理
- 移除动态取色功能(
useDynamicColor、setAutoColor()、getAverageRGB())及相关配置 - 移除服务器时间功能(
useLocalTime、fetchServerTime()),统一使用本地时间 - 移除未使用的 CSS 变量(
--ink、--paper、--accent等) - 移除
.auto-color上已无用的transition动画 - 清理 HTML 中过时的注释
欢迎贡献!请提交拉取请求。
随机一言功能基于 一言 API 实现。Bing每日壁纸背景API由 保罗 提供。
MIT License
Copyright (c) 2024 星尘
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.