记分牌
仿真翻页记分牌，为比赛和游戏实时计分
什么是记分牌？
记分牌是体育赛事和竞技游戏中用来记录双方得分的专用工具。这款在线记分牌模拟了真实翻页式记分牌的外观和翻页动画效果，让您在乒乓球、羽毛球、篮球、桌游、知识竞赛等场景中获得沉浸式的计分体验。
支持红蓝、红黄等多种配色方案，可添加最多 6 支队伍，支持一键全屏投影到大屏幕。所有数据自动保存在浏览器本地，刷新页面也不会丢失比分记录。
使用方法
使用方法
- 选择配色方案：红蓝、红黄等
- 点击队名即可编辑
- 使用 +/- 按钮调整比分
- 点击全屏按钮投影到大屏幕
显示技巧
- 活动开始前切换到全屏模式，确保队名、颜色和比分在观众席位置清晰可读。
- 若比分需作为正式记录，请在浏览器标签页关闭或本地存储被清除前，保留书面或系统记录。
使用场景
技术原理
记分牌作为一个小型客户端状态机运行：每支队伍是一个包含 name、score 和 color 字段的对象，整个名单在每次变更时以 JSON 字符串形式持久化到 window.localStorage。由于 localStorage 是同步的，且作用域限定为浏览器来源和用户配置文件，同一标签页在刷新后数据仍在，但不同浏览器或隐私模式窗口会从空名单开始。 翻页数字动画是纯 CSS 实现：每个数字分为上下两半，围绕 X 轴旋转，分数变化时切换可见数字，同时通过 300-400 毫秒的 transform: rotateX 过渡动画模拟翻页效果。由于动画由本地状态驱动而非网络帧，即使场馆 Wi-Fi 在比赛中途断开，显示仍会继续动画。全屏演示使用标准 Fullscreen API（element.requestFullscreen、document.exitFullscreen），使记分牌可以填满投影仪或电视屏幕，不显示浏览器界面。 多标签页同步依赖 storage 事件：当 localStorage 的 key 在一个标签页中发生变化时，同一来源下的其他标签页会收到 StorageEvent 并根据更新后的 JSON 重新渲染。这使得裁判手机和场边笔记本电脑无需任何后端即可保持同步，因为数据不会离开设备。
- 状态持久化：使用 window.localStorage.setItem 在每次分数变化时将 JSON 字符化的名单存储，按浏览器来源和用户配置文件隔离
- 翻页动画：两个 CSS 伪半部分通过 transform: rotateX 在约 300-400 毫秒内动画，无需 JS 动画循环
- Fullscreen API：element.requestFullscreen() / document.exitFullscreen()，配合 fullscreenchange 事件监听 Esc 键退出
- 多标签页同步：window.addEventListener('storage', handler) 在 key 变化时触发其他所有标签页
- 分数下限：分数被限制在零以上，防止减号按钮在休闲比赛中产生负分
- 颜色主题：CSS 自定义属性（--team-a、--team-b）无需重新渲染 DOM 树即可切换配色
- 分数上限取决于当前规则，例如篮球无上限，乒乓球以 11 分结束并有 2 分领先规则
示例
篮球半场记分牌
A 队：Lakers 颜色：红
B 队：Celtics 颜色：蓝
第一节：22 - 18
第二节：41 - 38 （半场）
第三节：60 - 55
第四节终场：82 - 76
主题：红蓝配色，体育馆投影仪全屏显示网球分盘比分
第 1 盘：6 - 4 （选手 A 胜）
第 2 盘：3 - 6 （选手 B 胜）
第 3 盘：7 - 5 （选手 A 胜）
最终：选手 A 以 2-1 取胜
小贴士：将队名改为选手名，每场比赛结束后重置知识竞赛之夜，4 队赛制
第 1 轮：Team Quokka 8，Team Otter 6，Team Bear 7，Team Wolf 5
第 2 轮：14、13、12、10
第 3 轮：21、22、17、16
最终：30、31、25、23 -> Otter 获胜
最多支持 6 队，分数保存在 localStorage乒乓球 11 分制
比分序列：1-0、2-0、2-1、3-1、3-2、3-3、4-3、…、10-9
10-10 平后进入决胜：必须领先 2 分获胜
最终：12 - 10
主题：红黄配色，便于大屏高对比度观看
重置比分会保留选手名以便下一局使用常见问题
适合哪些运动？
最初为乒乓球、羽毛球这类需要快速翻牌式记分的项目设计（突变切换、超大粗体数字）。同样适用于棋牌游戏、知识竞答、篮球、排球、电竞比赛、课堂答题以及任何需要快速更新比分的场景。
可以自定义队名和颜色吗？
可以。点击队名即可直接编辑。从预设的配色主题中（红蓝、红黄等）挑选适合赛事的方案。暂未提供 logo 或图片上传功能。
翻牌动画是怎么实现的？
通过 CSS 3D 变换模拟机械翻牌卡。翻转时长经过控制，不会拖慢快速记分（数百毫秒）。如果你更喜欢即时更新，可以在设置中关闭动画。
刷新页面后比分会保留吗？
会。当前的对阵信息（队名、比分、颜色）每次变动都会写入 localStorage，因此在同一浏览器中刷新后比分不会丢失。换浏览器或清除站点数据则会重置为 0-0。
可以在投影仪或大屏上使用吗？
可以。计分板支持全屏模式，方便投到投影仪、电视或外接显示器。比分会保存到 localStorage，在同一浏览器中刷新页面也不会丢失。
支持「局/盘」分制（如网球）吗？
部分版本支持——可以设置「N 局 X 胜制」结构，并在每局结束后重置当前比分。简化版本只统计原始得分。请根据你的运动选择合适的模式。
数据会上传吗？
不会。计分板完全在浏览器中运行，比分仅存在于当前标签页中，并（可选）写入 localStorage，任何数据都不会发送到服务器。