Z
ZengLiangYi
Back
工具2026-03-112 min read

PPT Timer：一个置顶于PPT全屏放映之上的LCD倒计时器

如何用 Electron 实现一个始终置顶于 PPT 放映之上的透明计时器，解决演讲超时问题。

ElectronDesktop AppProductivity

问题

PPT 演讲时，演讲者最常遇到的问题就是超时。虽然可以用手机计时，但低头看手机既不专业也容易分心。

我需要一个计时器，它能：

  1. 始终显示在 PPT 全屏放映之上
  2. LCD 风格的大字体，远距离可读
  3. 支持自定义时长
  4. 到时间后有视觉提醒

技术方案

选择 Electron，因为只有它能做到真正的窗口置顶（alwaysOnTop），包括置顶于 PPT 的全屏放映之上。

关键实现：透明置顶窗口

const timerWindow = new BrowserWindow({
  width: 300,
  height: 100,
  transparent: true,
  frame: false,
  alwaysOnTop: true,
  skipTaskbar: true,
  resizable: true,
  webPreferences: {
    nodeIntegration: true,
  },
});

// 设置最高置顶级别
timerWindow.setAlwaysOnTop(true, "screen-saver");

关键是 setAlwaysOnTop(true, "screen-saver") —— 使用 screen-saver 级别可以确保窗口在 PPT 全屏放映之上。

LCD 字体效果

使用 CSS 实现 LCD 数字效果：

.lcd-display {
  font-family: "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  text-shadow: 0 0 10px currentColor;
}

功能特性

  • 自定义倒计时时长（1-120 分钟）
  • LCD 风格大字体显示
  • 透明背景，不遮挡 PPT 内容
  • 拖拽定位，放在屏幕任意位置
  • 剩余 1 分钟时变红闪烁
  • 可调节透明度

总结

一个小工具，解决了无数演讲者的真实痛点。Electron 在这种场景下是不可替代的选择。

项目地址：GitHub

All Posts