演讲超时课堂拖堂用一个赛博朋克风格的桌面倒计时器帮你精准掌控每一分钟。痛点讲PPT的时候你大概率遇到过这些场景答辩给了8分钟讲到一半才发现已经过了6分钟手机计时器被PPT全屏挡住根本看不到Windows自带的闹钟在全屏模式下不弹出市面上的计时器软件要么丑得离谱要么不能真正置顶在PPT放映模式之上核心矛盾很简单PowerPoint的放映模式会独占全屏普通窗口根本显示不出来。PPT Timer 就是为了解决这一个问题而生的。它长什么样黑底荧光绿DSEG7液晶字体模拟真实LCD面板——上世纪终端机和考试用电子钟的既视感┌──────────────────────────┐ │ TIMER × │ │ ┌──────────────────────┐ │ │ │ 05:00 │ │ ← DSEG7 七段液晶数字 荧光绿发光 │ │ (88:88) │ │ ← 底层灰暗底纹模拟未点亮的LCD段 │ └──────────────────────┘ │ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ ← 30段LED进度条 │ ▶ ↺ │ ← 播放/暂停 重置 │ 01 03 05 08 15 │ ← 预设按钮分钟 └──────────────────────────┘ ↑ 1px荧光绿边框终端风核心特性真正的置顶—— 使用 Electron 的screen-saver级别窗口层级比系统级别的alwaysOnTop更高一层。PPT放映模式、游戏全屏、视频播放器——都挡不住它。win.setAlwaysOnTop(true,screen-saver);这一行是整个项目的灵魂。Electron 提供了多个置顶级别normal→floating→torn-off-menu→modal-panel→main-menu→status→pop-up-menu→screen-saverscreen-saver是最高级别连屏保都压得住。60fps 流畅计时—— 没有用setInterval。setInterval在后台标签页或高负载时会被浏览器降频导致倒计时不准。PPT Timer 使用requestAnimationFrame delta time 差值计算functiontick(timestamp){constdeltatimestamp-lastTick;lastTicktimestamp;remainingMs-delta;// ...requestAnimationFrame(tick);}计时精度不依赖定时器的调用频率而是依赖真实流逝的时间。颜色渐变预警—— 倒计时不是只有数字在跳。整个界面会根据剩余时间改变状态剩余时间颜色效果 30s#00ff41荧光绿正常计时10~30s#ffb000琥珀黄边框 LED条变黄 10s#ff0040红色数字闪烁 LED条闪动0s红色全窗口闪烁3次不需要盯着数字看——余光瞟到颜色变了就知道该收尾了。技术实现项目结构ppt-timer/ ├── main.js # Electron 主进程窗口配置 置顶策略 ├── preload.js # 安全桥接contextIsolation IPC ├── renderer/ │ ├── index.html # 界面布局 │ ├── style.css # LCD主题 动画 DSEG字体 │ └── app.js # 计时引擎 状态机 ├── assets/ │ └── icon.ico # 七段LCD风格图标 ├── .github/workflows/ │ └── release.yml # CItag推送自动构建发布 └── package.json总共不到600 行代码零运行时依赖。纯 HTML/CSS/JS没有 React没有 Vue没有 Tailwind。窗口策略无边框 透明背景 不可缩放窗口本身是隐形的只有中间那个280x320的黑色面板是可见的newBrowserWindow({width:280,height:320,frame:false,// 去掉标题栏transparent:true,// 背景透明resizable:false,alwaysOnTop:true});拖拽通过 CSS 实现——标题栏区域设置-webkit-app-region: drag按钮区域设置no-drag。窗口失焦时会重新声明置顶级别防止某些场景下被其他窗口抢占win.on(blur,(){win.setAlwaysOnTop(true,screen-saver);});LCD 视觉效果DSEG7 字体—— 开源的七段显示字体通过 jsDelivr CDN 加载。底层叠了一层暗灰色的88:88作为LCD底纹模拟真实液晶屏上未点亮的笔段。Scanline 扫描线—— 用 CSSrepeating-linear-gradient叠加2px间距的半透明横线模拟CRT/LCD的扫描线质感。Glow 发光——text-shadow双层扩散内层8px紧贴外层20px弥散模拟荧光管的发光晕染。状态机计时器有4个状态转换路径明确idle → running → paused → running → ... → finished ↑ │ └──────────── reset ←──────────────────────┘LED 进度条不是圆环不是线性进度条——是30个独立的小方块逐段熄灭像真实的LED阵列指示灯。最后10秒末尾的方块会高频闪动。使用方式下载安装直接去 GitHub Releases 下载PPT Timer Setup 0.1.0.exe双击安装。从源码运行gitclone https://github.com/ZengLiangYi/ppt-timer.gitcdppt-timernpminstallnpmstart需要 Node.js 20。操作点击底部预设按钮0103050815直接开始倒计时点击输入自定义分钟数▶暂停/继续↺重置拖拽标题栏移动窗口位置打开PPT放映 → 计时器始终在最上层CI/CD推 Tag 自动发布项目配置了 GitHub Actions工作流程git tag v0.2.0 git push origin v0.2.0推送v*格式的 tag 后GitHub Actions 自动在windows-latest上执行npm ci→electron-builder --win→ 将生成的.exe安装包发布到 GitHub Releases。整个流水线大约2分钟跑完。不需要本地装打包环境不需要手动上传文件。已知限制目前只打包了 Windows x64 版本PPT放映主要是Windows场景字体通过CDN加载首次启动需要网络后续有缓存没有声音提醒考虑到演讲场景声音反而是干扰后续计划字体本地化打包支持离线使用macOS 打包支持可配置的预设时间组正计时模式多显示器场景优化GitHub: https://github.com/ZengLiangYi/ppt-timer下载: PPT Timer v0.1.0协议: MIT — 随便用随便改。