如何在GitHub的README.md中创建项目阶段倒计时计时器
2026-5-22
嘿，我之前刚好帮团队做过类似的分阶段项目倒计时需求，刚好能给你支几招！首先得提醒你：GitHub的README.md默认会过滤掉JavaScript代码，直接把你那段JS贴进去是不会运行的，所以得用两种可行的方案来实现，看你需要哪种精度的倒计时：
方案一：静态自动更新的倒计时（适合日常协作，精度足够）
这种方案是用GitHub Actions定时计算剩余时间，自动更新README里的文本，不需要用户手动刷新，几小时更新一次完全满足团队协作需求。
实现步骤：
- 第一步：写个简单的Python脚本计算剩余时间，比如命名为
update_countdown.py：
import datetime # 定义当前阶段的结束时间，替换成你的实际阶段截止时间 PHASE_END = datetime.datetime(2024, 6, 30, 23, 59, 59) NOW = datetime.datetime.now() remaining = PHASE_END - NOW # 格式化剩余时间为易读格式 days = remaining.days hours, remainder = divmod(remaining.seconds, 3600) minutes, seconds = divmod(remainder, 60) # 生成要插入README的倒计时文本块 countdown_text = f"### 当前阶段剩余时间\n> {days}天 {hours}小时 {minutes}分钟 {seconds}秒" # 读取并更新README内容（用标记定位替换位置） with open("README.md", "r") as f: content = f.read() start_marker = "<!-- COUNTDOWN_START -->" end_marker = "<!-- COUNTDOWN_END -->" start_idx = content.find(start_marker) + len(start_marker) end_idx = content.find(end_marker) new_content = content[:start_idx] + "\n" + countdown_text + "\n" + content[end_idx:] with open("README.md", "w") as f: f.write(new_content)
- 第二步：配置GitHub Actions定时运行脚本，在
.github/workflows/countdown.yml中添加：
name: Update Countdown on: schedule: # 每小时自动运行一次，可根据需求调整频率 - cron: '0 * * * *' workflow_dispatch: # 允许手动触发更新 jobs: update-countdown: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Set up Python uses: actions/setup-python@v5 with: python-version: '3.10' - name: Run countdown script run: python update_countdown.py - name: Commit and push changes run: | git config --local user.name "github-actions[bot]" git config --local user.email "github-actions[bot]@users.noreply.github.com" git add README.md git commit -m "Update countdown: $(date)" || echo "No changes to commit" git push
- 第三步：在你的README.md里插入标记，方便脚本定位替换：
<!-- COUNTDOWN_START --> <!-- COUNTDOWN_END -->
这样每次Actions运行，就会自动更新这段内容，协作者打开README就能看到最新的剩余时间啦！
方案二：实时动态倒计时（需跳转至项目页面）
如果需要精确到秒的实时倒计时，就得把倒计时放在GitHub Pages的页面里，再在README里添加跳转链接。这里给你完善了你提供的JS代码：
首先，在项目里创建docs/countdown.html文件：
<!DOCTYPE html> <html> <head> <title>项目阶段倒计时</title> <style> .countdown { font-size: 2em; font-weight: bold; color: #2ea44f; text-align: center; margin-top: 50px; } .phase-info { text-align: center; font-size: 1.2em; margin-bottom: 20px; } </style> </head> <body> <div class="phase-info">当前阶段：项目需求确认</div> <div class="countdown" id="countdown"></div> <script> function startTimer(endTime, display) { const updateTimer = () => { const now = new Date().getTime(); const distance = endTime - now; if (distance < 0) { display.textContent = "当前阶段已结束！"; clearInterval(timer); return; } const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); display.textContent = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`; }; // 先执行一次避免初始延迟 updateTimer(); // 每秒更新一次倒计时 const timer = setInterval(updateTimer, 1000); } // 设置当前阶段的结束时间，替换成你的实际截止时间 const phaseEnd = new Date("2024-06-30T23:59:59"); const display = document.getElementById("countdown"); startTimer(phaseEnd.getTime(), display); </script> </body> </html>
然后在GitHub仓库的设置里开启GitHub Pages，选择docs文件夹作为源。最后在README.md里添加跳转链接：
### 实时阶段倒计时 想要查看精确到秒的实时倒计时？点击这里：[项目阶段实时倒计时](https://你的用户名.github.io/你的仓库名/countdown.html)
这样协作者点击链接就能看到实时跳动的倒计时了！
两种方案各有优缺点：方案一不用跳转，直接在README里查看，适合日常快速了解进度；方案二更精确，适合需要实时监控阶段截止的场景，你可以根据团队需求选择～
内容的提问来源于stack exchange，提问作者antzshrek
