🎯 一、最终效果预览
在你的网页底部，将出现一段优雅的文字：
本站居然运行了 278 天
03 小时 12 分 45 秒 ❤️
旅行者 1 号当前距离地球 23,901,234,567 千米，约为 159.789012 个天文单位 🚀
其中：
- 时间数字：粉红色加粗，突出显示
- ❤️ 心跳图标 ：会 有节奏地放大缩小，像在“跳动”
- 整体居中、等宽字体、科技感十足
🔧 二、完整代码（一键复制）
✅ 1. HTML 容器（放在页脚附近）
<div id="workboard"></div>💡 建议放在
<footer.php>或页面底部固定区域
✅ 2. JavaScript 核心逻辑（倒计时 + 旅行者 1 号模拟）
| <script async=“async”> | |
| (function () {var grt = new Date(“12/05/2022 00:00:00”); // ⚠️ 修改为你自己的上线时间 | |
| var now = new Date(); | |
| var dnum, hnum, mnum, snum, t, n; | |
| function updateTime() {now = new Date(); // 实时更新 | |
| var diff = (now – grt) / 1000; // 总秒数 | |
| dnum = Math.floor(diff / 86400); // 天 | |
| hnum = Math.floor((diff / 3600) % 24); | |
| mnum = Math.floor((diff / 60) % 60); | |
| snum = Math.floor(diff % 60); | |
| // 补零：0 → 00 | |
| hnum = hnum < 10 ? “0” + hnum : hnum; | |
| mnum = mnum < 10 ? “0” + mnum : mnum; | |
| snum = snum < 10 ? “0” + snum : snum; | |
| // 旅行者 1 号：起始 23.4 亿 km，每秒飞 17km | |
| t = Math.trunc(234e8 + diff * 17); | |
| n = (t / 1496e5).toFixed(6); // 转为天文单位 AU | |
| } | |
| function updateHtml() {if (document.getElementById(“workboard”)) {document.getElementById(“workboard”).innerHTML = ` | |
| <div id=”runtimeTextTip”> | |
| 本站居然运行了 ${dnum} 天 | |
| <span id=”runtime”> ${hnum} 小时 ${mnum} 分 ${snum} 秒 </span> | |
| <i class=”haofont hao-icon-heartbeat” style=”color:red”></i> | |
| <br> | |
| 旅行者 1 号已飞行 ${t.toLocaleString()} 千米，约为 ${n} AU 🚀 | |
| </div>`; | |
| } | |
| } | |
| setInterval(() => {updateTime(); | |
| updateHtml();}, 1000); | |
| })(); | |
| </script> |
✅ 修改
new Date("12/05/2022 00:00:00")为你的上线时间（格式：月 / 日 / 年）
✅ 3. CSS 样式（重点！逐行深度解析）
| #runtimeTextTip { | |
| font-family: ‘Courier New’, monospace; | |
| font-size: 13px; | |
| line-height: 1.6; | |
| color: #666; | |
| text-align: center; | |
| margin: 10px 0; | |
| } | |
| #runtime { | |
| color: #e91e63; | |
| font-weight: bold; | |
| } | |
#runtimeTextTip i {animation: heartbeat 1.2s infinite;} |
|
| @keyframes heartbeat {0%, 100% { transform: scale(1); } | |
| 50% {transform: scale(1.2); } | |
| } |
🔍 三、CSS 代码逐行深度解析（这才是重点！）
📌 1. #runtimeTextTip —— 外层容器样式
| 属性 | 作用 | 你可能不知道的细节 |
|---|---|---|
font-family: 'Courier New', monospace; |
使用等宽字体 | ✅ 数字对齐更整齐：1 宽度相同，时间列对齐更专业✅ monospace 是备用字体，确保所有设备都能显示等宽效果 |
font-size: 13px; |
字体大小 | ✅ 小字号不喧宾夺主：作为“彩蛋”，不宜太大，13px 是网页次级信息常用尺寸 |
line-height: 1.6; |
行高 | ✅ 提升可读性：两行文字（运行时间 + 旅行者 1 号）之间留白舒适，避免拥挤 ✅ 1.6 是“黄金阅读比例”，比 1.5 更宽松 |
color: #666; |
灰色文字 | ✅ 降低视觉权重：不是主要内容，用灰色表示“辅助信息” ✅ 比 #999 稍深，比 #000 柔和，适合长时间阅读 |
text-align: center; |
居中对齐 | ✅ 适配大多数博客的页脚布局，视觉平衡 |
margin: 10px 0; |
上下外边距 | ✅ 防止与上方导航或下方版权信息贴得太近，提升整体呼吸感 |
📌 2. #runtime —— 时间数字高亮
| 属性 | 作用 | 隐藏设计逻辑 |
|---|---|---|
color: #e91e63; |
Material Design 粉红色 | ✅ 情感化设计：粉色 ❤️ = 爱、心跳、生命力 ✅ 与后面的 <i> 图标颜色呼应，形成“视觉闭环” |
font-weight: bold; |
加粗 | ✅ 信息层级强调：让“精确时间”成为视觉焦点，用户一眼看到“运行了多久” |
📌 3. #runtimeTextTip i —— 心跳图标动画控制
#runtimeTextTip i {animation: heartbeat 1.2s infinite;}| 属性 | 作用 | 工程细节 |
|---|---|---|
animation: heartbeat ... |
调用名为 heartbeat 的动画 |
✅ 动画名必须与 @keyframes 一致 |
1.2s |
动画周期为 1.2 秒 | ✅ 接近人类 静息心率（约 50 bpm），营造“生命感” ⚠️ 太快像抽搐，太慢像停跳，1.2s 是平衡点 |
infinite |
无限循环 | ✅ 确保动画永不停止，象征“网站持续运行” |
📌 4. @keyframes heartbeat —— 动画关键帧定义
| @keyframes heartbeat {0%, 100% { transform: scale(1); } | |
| 50% {transform: scale(1.2); } | |
| } |
| 关键帧 | 作用 | 为什么这么设计？ |
|---|---|---|
0%, 100% {scale(1) } |
起点和终点为原始大小 | ✅ 无缝循环：动画结束时回到起点，无跳变感，用户体验更自然 |
50% {scale(1.2) } |
中点放大 120% | ✅ 模拟心脏“收缩 – 舒张”过程 ✅ 1.2 倍是 最佳视觉膨胀感，不会太夸张 |
💡 为什么不使用
width/height？
因为transform: scale()只触发 重绘（repaint），不触发 重排（reflow），性能更高，动画更流畅！
🎨 四、设计哲学：这不只是样式，是“情感化 UI”
| 元素 | 设计意图 |
|---|---|
| ❤️ 心跳动画 | 暗示“网站有生命”，不是冷冰冰的代码 |
| 粉红色时间 | 与 ❤️ 形成色彩呼应，强化“热爱”主题 |
| 旅行者 1 号 | 象征“探索”与“坚持”，与“网站运行时间”形成宇宙级浪漫对比 |
| 等宽字体 | 传递“程序员”、“极客”、“精准”的身份认同 |
🌌 一句话总结：
你在显示的不只是时间，而是一个 有温度、有心跳、有梦想的网站。
🛠️ 五、部署步骤（超简单）
- 修改上线时间：把
12/05/2022改成你的真实上线日期 - 插入容器：在 HTML 中添加
<div id="workboard"></div> - 粘贴 JS 和 CSS：分别放入
脚本和样式区域 - 刷新页面：见证奇迹 ✨
📱 六、响应式优化（可选）
让手机端更友好：
| @media (max-width: 767px) { | |
| #runtimeTextTip { | |
| font-size: 12px; | |
| line-height: 1.5; | |
| } | |
| #runtime {font-size: 14px; /* 可稍大突出 */} | |
| } |
🚀 七、结语：用代码写诗
“我们造出的机器，正飞向太阳系边缘；
我们写的网站，已坚持更新了 1000 天。
宇宙浩瀚，但每一个坚持，都值得被看见。”
本文转自：https://cn.lovau.cn/sapce-and-time/
正文完