实现舒尔特注意力训练器：算法设计与前端实践

简介：舒尔特表格注意力训练材料以doc文档呈现，面向希望提升专注力、视觉搜索速度与工作记忆的人群，也适用于儿童注意力训练及运动员、飞行员等需要高度专注的职业人士。训练基于心理学原理，通过动态视觉搜索刺激视神经末梢，表格采用方形矩阵随机排列数字，训练者需按顺序快速找出目标数字，矩阵大小可调，适应不同水平。这套材料内含完整的舒尔特表格练习矩阵与训练说明，矩阵中数字排列密集、干扰项多，可直接打印或对照练习，通过持续计时训练改善信息处理效率，同时锻炼心理灵活性与执行功能。资源共1个文件，格式为doc，大小仅254KB，轻量易用。目前已有1672人学习下载，适合教育工作者、家长及自我提升者作为日常注意力训练工具，也是认知训练的实用入门素材。

1. 舒尔特表格不是“找数字游戏”：注意力训练的最小闭环从哪里开始

舒尔特表格这个名字在认知训练圈出现频率很高，但初次接触的人十个有九个会把它当成“点数字练反应”的小游戏。5×5的网格里随机放着1到25，你按顺序点完，用时越短越好。看起来很简单，实际训练逻辑完全不是这么回事：它练的是余光扫视和注意广度，要求你的眼睛不要跟着数字逐个跑，而是让注意力铺满整个表格，靠边缘视觉去捕捉下一个目标。成年人第一次训练平均用时40秒上下，练两周能稳定到25秒以内——这个变化不是手速变快了，而是视觉搜索策略变了。

它解决的核心问题很简单：注意力到底能不能练。对于需要长时间保持专注的开发者、备考者、司机，以及想改善孩子阅读速度的家长，舒尔特表格是一个反馈即时、单次耗时短、不需要复杂器械的训练入口。一次训练3到5分钟，做完就能看到成绩，不像冥想那样需要长期坚持才能感到反馈。这篇文章围绕“自己做一套舒尔特表格”展开：从生成算法、前端实现、参数设计到常见的成绩失真坑，最后落到数据追踪方案。内容都按一线实践来写，你能直接照着做出来。

2. 生成一张合规的舒尔特表格：随机排列算法与坐标映射

2.1 为什么“随机”是训练有效性的第一道门槛

舒尔特表格最核心的元件不是网格，而是那张数字分布表。如果数字排列存在可感知的规律——比如前五个数字总是集中在左上角，下一轮又跑到右上角——训练者会在几轮之后不自觉地记住区块位置，成绩提升就变成了“背板”，而不是注意素养的改善。这种成绩虚高会在换一张新表格时瞬间打回原形，用户以为自己进步了，实际只是记住了旧排列。

生成随机排列最常见的错误做法是“暴力随机”：每次随机挑一个数字，检查已经用过就重新挑，直到填满格子。对5×5的25个数字这种方式尚可，最多多循环几次；但到了7×7甚至9×9（81个数字），随机到末尾时碰撞率急剧上升，程序可能卡上几十毫秒甚至更久，这是完全没必要的性能损失。我见过某跨平台系统里用这个方案做6×6，用户连续点“重新开始”十几次之后页面开始明显迟滞，就是因为碰撞导致循环次数失控。

正确做法是 Fisher-Yates 洗牌算法。它的核心思想是从后往前遍历数组，每次把当前位置的元素和前面某个随机位置的元素交换，一轮遍历下来就得到一个等概率的排列。时间复杂度 O(n)，不产生重复，也不会卡顿。

// 用 Fisher-Yates 生成 1~n 的随机排列 function generateShuffledNumbers(total) { const arr = Array.from({ length: total }, (_, i) => i + 1); // 注意是倒序遍历，每轮只和未处理的交换 for (let i = total - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; }

这里Math.random()生成的是 [0,1) 的伪随机浮点数，乘上i + 1后取整，得到 [0, i] 的均匀整数下标。对训练场景足够了。但如果你的表格要做成多人排行榜，或者担心伪随机种子的可预测性，可以把Math.random()换成crypto.getRandomValues()获取加密级安全的随机数：

// 加密级随机洗牌，消除可预测性 function cryptoShuffle(total) { const arr = Array.from({ length: total }, (_, i) => i + 1); const randomBuffer = new Uint32Array(total); crypto.getRandomValues(randomBuffer); for (let i = total - 1; i > 0; i--) { const j = randomBuffer[i] % (i + 1); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; }

注意，randomBuffer[i] % (i + 1)在模数不是2的幂时会产生极轻微的模偏差。用在大尺寸表格上，某个数字被选中的概率差异在百万分之一量级，肉眼和成绩统计都感知不到；如果做科研用途，需要用拒绝采样来消除偏差。我在模拟项目X里用的是普通Math.random()方案，排行榜数据没有出现过规律性波动。

2.2 从一维数组到二维网格：坐标映射与渲染顺序

洗牌算法得到的是一个一维数组[3, 17, 8, ...]，但用户看到的是5×5的网格。这里有个容易被新手忽略的决策点：到底用二维数组grid[row][col]存数据，还是用一维数组按行优先顺序存、在渲染时换算坐标？

我的习惯是一维数组存数据、二维坐标只存在于渲染层。理由有二。其一是洗牌算法天然操作一维数组，转二维要多一层嵌套循环；其二是点击交互时只需要知道当前元素在数组里的下标，就能换算出行列，不需要维护二维结构，代码路径短一半。

// 一维数组下标 -> 网格行列 function indexToPosition(index, size) { return { row: Math.floor(index / size), col: index % size, }; }

渲染时用 CSS Grid 布局，一维数组的每个元素对应一个单元格，按顺序依次 append 到容器里，Grid 自动填充到对应位置。这里最需要注意的是不要用innerHTML +=来逐格拼接。每次innerHTML +=都会触发浏览器重新解析整个容器的 HTML，25个格子时还感觉不到，9×9也就是81个格子时会有肉眼可感知的卡顿。正确做法是创建DocumentFragment，在 fragment 里 append 所有格子，最后一次插入容器，只触发一次重排：

// 用 DocumentFragment 批量渲染，避免逐格触发重排 function renderGrid(numbers, containerId) { const container = document.getElementById(containerId); const fragment = document.createDocumentFragment(); const size = Math.sqrt(numbers.length); container.style.display = 'grid'; container.style.gridTemplateColumns = `repeat(${size}, 1fr)`; numbers.forEach((num) => { const cell = document.createElement('button'); cell.textContent = num; cell.dataset.number = num; fragment.appendChild(cell); }); container.innerHTML = ''; // 清空旧格子 container.appendChild(fragment); // 一次性插入 }

这里的gridTemplateColumns用repeat(size, 1fr)让单元格等宽，自适应父容器宽度。dataset.number存数字，点击时直接读取，不需要遍历查找。单元格用button而不是div有个额外好处：键盘用户可以用 Tab 键在格子间移动，回车完成点击，可访问性免费拿到。代价是 button 自带默认样式，需要额外重置边框和背景。

2.3 计时与交互响应：性能开销藏在哪个环节

舒尔特表格的交互只有两种：点击正确数字、点击错误数字。这里的性能开销不在于事件处理本身——几十次点击完全可以忽略——而在于点击之后触发的重绘和状态更新。如果每点一次就操作多处 DOM 属性，比如切换 class、改背景色、改文本，确实够流畅，但代码结构容易失控，后面加功能时改起来很痛苦。

更常见的问题是：计时器要不要每帧刷新显示？答案是否。训练过程里显示实时毫秒数会干扰用户注意力，还会造成不必要的重绘压力。我一般只在训练结束时显示成绩，过程中的计时完全由performance.now()记录，结束时一次性读出，中间不碰 DOM。

// 用 performance.now() 记录精确耗时，只在结束时读取 let startTime = 0; // 在第一次有效点击时记录起点 function recordStart() { startTime = performance.now(); } // 结束时计算耗时，单位秒，保留两位小数 function getElapsed() { const elapsed = performance.now() - startTime; return (elapsed / 1000).toFixed(2); }

performance.now()的精度是毫秒级，并且单调递增，不像Date.now()那样受系统时钟跳变影响。这里不用setInterval去实时更新显示，可以省掉大量无效渲染。事件绑定层面，用事件委托在容器上只挂一个 click 监听器，而不是给每个格子单独绑定，这样换一局重新生成格子时不需要解绑旧监听，也不存在内存泄漏。

// 事件委托：容器上挂一次监听，新渲染的格子自动生效 container.addEventListener('click', handleCellClick); function handleCellClick(event) { const cell = event.target.closest('button[data-number]'); if (!cell) return; const num = parseInt(cell.dataset.number, 10); // 判定逻辑在这里 }

closest的作用是处理用户点击到 button 内部文字或边框的情况，保证拿到的永远是外层 button 元素。使用事件委托还有一个好处：后续如果加入“点击错误格子有动画”的逻辑，只需要在 handleCellClick 里加分支，不需要重新绑定任何监听。

3. 在本地浏览器跑通一个最小舒尔特训练器：代码与参数说明

3.1 表格生成与点击判定：最小可运行版本

这里给出一份完整实现。复制到本地 HTML 文件里，用浏览器打开就能跑，不需要构建工具，不需要装包。它已经把随机排列、网格渲染、点击判定、计时和成绩结算全部串起来了。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>舒尔特注意力训练</title> <style> body { font-family: system-ui, sans-serif; margin: 2rem auto; max-width: 480px; padding: 0 1rem; text-align: center; } #grid { display: grid; gap: 8px; max-width: min(90vw, 420px); margin: 1rem auto; } #grid button { font-size: 1.5rem; aspect-ratio: 1; padding: 0; border: 1px solid #ccc; border-radius: 8px; background: #fff; cursor: pointer; } #grid button.correct { background: #c8e6c9; border-color: #a5d6a7; } #result { font-size: 1.25rem; margin: 1rem 0; color: #2b6cb0; } </style> </head> <body> <h1>舒尔特注意力训练</h1> <div id="controls"> <label>格子数：<select id="sizeSelect"> <option value="3">3x3（入门）</option> <option value="5" selected>5x5（标准）</option> <option value="7">7x7（进阶）</option> </select></label> <button id="restartBtn">重新开始</button> </div> <div id="result">准备就绪：点击最小数字开始</div> <div id="grid"></div> <script> let currentTarget = 1; let startTime = 0; let isRunning = false; let gridSize = 5; // Fisher-Yates 洗牌 function generateNumbers(total) { const arr = Array.from({ length: total }, (_, i) => i + 1); for (let i = total - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; } // 渲染网格 function renderGrid(size) { const grid = document.getElementById('grid'); const numbers = generateNumbers(size * size); const fragment = document.createDocumentFragment(); gridSize = size; grid.style.gridTemplateColumns = `repeat(${size}, 1fr)`; numbers.forEach((num) => { const cell = document.createElement('button'); cell.textContent = num; cell.dataset.number = num; fragment.appendChild(cell); }); grid.innerHTML = ''; grid.appendChild(fragment); currentTarget = 1; startTime = 0; isRunning = false; document.getElementById('result').textContent = '准备就绪：点击最小数字开始'; } // 事件委托处理点击 document.getElementById('grid').addEventListener('click', function (e) { const cell = e.target.closest('button'); if (!cell || !isRunning) return; const num = parseInt(cell.dataset.number, 10); if (num === currentTarget) { if (startTime === 0) { startTime = performance.now(); isRunning = true; } cell.classList.add('correct'); cell.disabled = true; currentTarget++; if (currentTarget > gridSize * gridSize) { const elapsed = ((performance.now() - startTime) / 1000).toFixed(2); document.getElementById('result').textContent = `完成用时：${elapsed} 秒`; isRunning = false; } else { document.getElementById('result').textContent = `下一个：${currentTarget}`; } } }); document.getElementById('restartBtn').addEventListener('click', function () { const size = parseInt(document.getElementById('sizeSelect').value, 10); renderGrid(size); }); renderGrid(5); </script> </body> </html>

这段代码约70行，把核心闭环都覆盖了。注意我在首次加载时调用renderGrid(5)，之后用户换尺寸或点“重新开始”都会走同一套渲染逻辑，状态变量全部重置，不会出现上一局残留的计时干扰下一局。

3.2 计时与成绩判定逻辑：三个关键决策

这里展开说三个容易被问到的点。

第一，计时起点没有选在“点击重新开始按钮”，而是选在“第一次正确点击数字1”。原因：用户点击重新开始后，还需要花一秒到几秒去定位数字1，这个搜索准备时间如果混入成绩，会让同一用户在同一天多次训练的成绩起伏很大——有时他先扫一眼再点开始，有时点完才开始找。为了让成绩更稳定、更反映真实注意状态，我让第一次正确点击同时作为“游戏开始”信号和计时起点。代价是用户故意拖延不点1的话，计时不会开始，但这在训练场景没问题，毕竟目标是练注意力而不是刷成绩。

第二，正确格子立刻disabled = true。这从机制上杜绝了连点同一个格子把成绩刷虚的情况，同时给用户明确的视觉反馈：走过的格子不会再参与交互。如果你手动测试时发现某个格子被点过还能再点，一定是忘了这个属性。

第三，错误点击的处理需要单独设计。这份代码里暂时没做误触反馈，但你在实际使用时应该加上——我通常的做法是点错时给一个短促的红色闪烁，但不打断计时，也不加惩罚。有人会设计成“点错一次加1秒”或“点错直接判失败”，看起来更严格，但对注意力训练来说，惩罚机制会诱导用户追求准确率而放慢速度，反而偏离了训练目标。舒尔特表格的核心指标就是完成时间，误触是过程信息，不是结算条件。

3.3 参数化训练尺寸与轮次：从写死到可配置

上面的代码用下拉框支持了3×3、5×5、7×7三种尺寸，这就是参数化的最小形态。但参数化不只暴露一个 size 数字那么简单，还要考虑布局和字号的自适应。

对于尺寸切换，我的建议是不要在一个容器里直接硬切到9×9。9×9共81个格子，如果按5×5的格宽渲染，格子会小到触控困难；如果放大格子，整个表格又会超出屏幕。你需要根据尺寸等比调整字号：

// 依据 size 动态调整格子字号 function applySizeStyle(size) { const grid = document.getElementById('grid'); const cellSize = Math.min(90, Math.floor(420 / size) - 8); grid.querySelectorAll('button').forEach((btn) => { btn.style.fontSize = `${Math.max(14, cellSize * 0.4)}px`; }); }

这里把表格最大可用宽度设为420像素，每个格子尺寸用420 / size估算再减去间距，字号按格子尺寸的40%设置。手机上配合min(90vw, 420px)的容器宽度，能使表格在任何屏幕上都刚好放得下。

参数化的另一层含义是训练轮次：一次训练跑几局。只跑一局的成绩噪声太大，受偶然干扰影响严重；跑太多又容易疲劳，后面几局因为手指酸了反而变慢。我一般给用户预设一组5局，取中位数作为当日成绩。中位数比平均值抗极端值——某局被打断导致超时，平均值会被拉垮，中位数不受影响。这个逻辑后面第6章还会展开。

4. 难度分级与训练参数：从 5x5 到 9x9，干扰项与训练节奏怎么定

4.1 不同尺寸表格对应的训练目标与成绩参考

舒尔特表格的经典尺寸是5×5，25个数字。这个尺寸的物理意义在于：一眼看过去，整个表格落入中央视觉区和周边视觉的过渡带，迫使训练者扩大注意广度。3×3的9个数字太容易，训练者可以把注意力集中在表格中央一次性看完全部；7×7以上数字密度大，必须依赖更高效的视觉搜索策略。

我习惯这样分级：3×3用于儿童启蒙或成年人第一次接触时的预热，不记成绩；5×5是标准训练档位，记录每日成绩；7×7作为进阶挑战，每周做一次，检验注意广度的扩展效果。9×9偶尔用一次可以，但主要给对训练有明确目标的人用——普通用户做九宫格找不到目标会产生强烈挫败感，反而不利于长期坚持。

成绩参考没有统一标准，但比较常用的粗标尺我放在下表里，基于成人新手数据：

注意，这些数值会随训练者年龄和认知基线不同产生明显偏移，不建议当作医学或认知测评依据。它更适合用来做个人纵向对比，也就是拿今天的成绩和昨天的自己比。不同人之间直接比较意义不大，因为注意广度和反应速度的基线差异很大。

4.2 干扰项设计：颜色噪点、背景噪音真的能提升训练效率吗

很多进阶版舒尔特表格会在数字以外叠加干扰：比如给某些格子染上黄色背景，或者放动态粒子在表格后面。这种做法在市面上很流行，但效果有争议。从注意力模型来看，加入与任务无关的刺激确实会增加认知负荷，让你在抑制干扰的同时完成视觉搜索，理论上比纯表格更锻炼抗干扰能力。

但如果干扰项使用不当，会破坏训练本身。最典型的错误是干扰太强导致用户无法快速识别数字，训练变成了“找被挡住的数字”，练的是视觉辨识而不是注意广度。我自己的方案是：基础训练阶段不加任何干扰；训练满两周后，再开启“背景噪点”模式，噪点透明度控制在30%以下，并且不遮挡数字区域。这个模式下成绩通常比纯表格慢10%到20%，用户需要有心理预期，否则容易产生“我怎么退步了”的错觉。

另一个点是颜色一致性。数字颜色最多两三组，且要排除红绿色盲难以分辨的组合。我用的是黑色数字配灰色噪点，训练几局后把数字整体变成深蓝色，没有用过红色或橙色这类高亮色——高亮颜色会把注意力不自觉地拉向彩色区域，干扰视觉搜索的均匀性。做干扰项时，你可以在代码里定义一个noiseLevel参数，0表示无干扰，0.3表示噪点透明度30%，这样方便你在训练中给用户分级开启。

4.3 训练节奏与疲劳控制：每天几轮、中间休息多久

舒尔特训练的单轮时间短（25秒到100秒），但这不意味着可以连续猛刷。当连续做超过5轮时，视觉疲劳会让错误率上升，而上升的原因与注意广度无关，单纯是眼睛累了。这个阶段的成绩曲线看起来像在退步，实际是身体在抗议。

推荐的节奏是：每轮之间休息30到60秒，让眼睛离开屏幕看远处或闭眼；每组5轮做完后休息5到10分钟再进行下一组。每天最多做2到3组，训练总量控制在20分钟以内。这个节奏从实际数据里来：超过这个量之后，第6轮开始的中位数成绩普遍比前5轮慢10%以上，这种衰减与训练者的主观疲劳报告高度相关。

代码层面，把节奏控制做成一个简单的间隔提醒很有用。记录每轮完成时间戳，如果距上一轮结束不足30秒，提示“建议休息30秒再开始下一轮”。这个小功能对养成训练习惯很有价值，避免用户为了刷成绩连续做10轮，然后因为状态下滑产生挫败感。

4.4 不同人群的参数预设：儿童、成人与老人的差异

做舒尔特表格遇到最多的使用场景其实是给孩子训练，其次是成年人自用，偶尔有老人用来做认知维持训练。这三类人群对参数的需求差异很大。

儿童（尤其是小学低年级）的注意持续时间短，视觉搜索策略还没形成，3×3的9个数字对他们是合适的起点。开始训练前应该先用无干扰模式，等连续几次成绩稳定在4秒以内再升到5×5。儿童的字体要大，格子边距要宽，因为精细动作还在发育，格子太小会变成手眼协调的阻碍而不是注意力训练。成年人则直接上5×5，两周后再决定是否上7×7。老人群体的核心诉求通常不是提升上限，而是维持水平，所以5×5足够，重点在于每天固定时间段做一组，用数据趋势观察是否有明显波动——显著变慢可能有健康预警意义，但这不是本文要讨论的，只是单纯提醒你别忽略数据的价值。

这些参数预设也可以作为你代码里的默认配置：

// 不同人群的默认参数 const profiles = { child: { size: 3, rounds: 3, noiseLevel: 0, restMs: 45000 }, adult: { size: 5, rounds: 5, noiseLevel: 0, restMs: 30000 }, senior: { size: 5, rounds: 3, noiseLevel: 0, restMs: 60000 }, };

这套配置的好处是用户不需要理解“什么是搜索策略”就能开始训练，你只要在界面上放三个按钮“儿童 / 成人 / 年长”，点一下就把所有参数设好。我在某图像处理Demo里就是这么做的，用户反馈比让它们自己选尺寸和轮次清楚得多。

5. 舒尔特表格避坑指南：随机数、误触、计时与布局的四个坑

5.1 数字重复与排列异常：洗牌算法写反了

现象：某次生成的表格里数字“7”出现了两次，“13”完全消失；或者同一局里连续几个数字挤在表格中心区域。

原因：随机数生成器本身没问题，但洗牌算法写错了。最常见的错误是把 Fisher-Yates 的循环方向写反——比如从前往后遍历，每轮和前面的随机位置交换，这样前面的元素有概率被多次交换，后面的元素几乎没机会参与，排列的等概率性被破坏，长期统计下某些数字会倾向出现在特定区域。

解决：回看洗牌代码，确认循环是for (let i = total - 1; i > 0; i--)，交换目标j必须在[0, i]之间。如果写成j = Math.floor(Math.random() * total)（在 [0, total) 之间取），虽然不会产生重复，但会让部分排列概率不均衡。我的检查方法是做一个分布验证：生成一万次表格，统计每个数字出现在每个位置的概率，应该在 1/25 附近浮动，偏差超过1%就说明算法有问题。

// 分布验证：统计每个数字落位频率 function verifyDistribution(total, iterations = 10000) { const size = total; const count = Array.from({ length: total }, (_, i) => Array.from({ length: total }, () => 0) ); for (let iter = 0; iter < iterations; iter++) { const arr = generateNumbers(total); arr.forEach((num, pos) => { count[num - 1][pos]++; }); } // 理想值：iterations / total const ideal = iterations / total; let maxDeviation = 0; for (let num = 0; num < total; num++) { for (let pos = 0; pos < total; pos++) { const dev = Math.abs(count[num][pos] / ideal - 1); maxDeviation = Math.max(maxDeviation, dev); } } console.log(`最大偏差：${(maxDeviation * 100).toFixed(2)}%`); }

运行一万次只需几十毫秒，你可以在开发阶段跑一下，确认最大偏差在1%以内就放心了。

5.2 误触连点：成绩失真的数据污染

现象：用户明明点对了“5”，但因为手指抖动，先碰到了旁边的“6”，误触被无关紧要地忽略；或者用户双击，同一个格子被点两次，导致数字被跳过。成绩数据里掺杂了大量误触记录，难以判断真实水平。

原因：误触没有反馈，用户不知道点错了，下一次搜索策略不会调整；正确格子没有禁用，连点同一格会重复触发命中逻辑。

解决：按这个标准方案处理——点错时不打断计时，但给一个醒目反馈（红色闪烁或短振动），然后立即恢复。同时记录误触次数，在成绩结算时展示“用时”和“误触次数”两个指标，让用户知道自己在用速度换准确率。正确格子必须disabled，从机制上杜绝连点。从实际数据看，加了disabled之后，同一用户的成绩方差明显下降，说明连点确实是数据噪声的主要来源。

// 误触反馈与记录 let missCount = 0; function handleMiss(cell) { missCount++; cell.classList.add('error'); setTimeout(() => cell.classList.remove('error'), 150); }

5.3 计时起点不一致：准备时间混入成绩

现象：同一用户一天的多次训练成绩波动巨大，有时35秒有时55秒，但回看过程觉得操作节奏差不多。

原因：第一次点击前用户需要找到数字1，这个时间有时1秒有时8秒。如果游戏在页面加载时就同步开始计时，这个搜索时间是纯噪声，直接混进成绩。

解决：采用“首次正确点击计时”策略，也就是上面第3章代码里的方案——用户最先点击的永远是数字1，点击数字1的时刻就是计时起点。我见过某模拟项目用“点开始按钮弹出表格同时计时”的方案，这在实验心理学里有依据（用开始信号对齐），但实际训练场景里表格已经在屏幕上，用户很难做到“先不看、点完再看”，第一次点击计时是更鲁棒的选择。如果你确实需要开始按钮对齐，至少要留1秒的准备期让用户先定位数字1，否则一定要用首次点击计时。

5.4 屏幕适配：手机上的格子被挤变形

现象：在电脑上做完的表格，拿到手机上打开，格子变成了细长方形，数字被压扁，或者表格超出屏幕要左右滑动才能看完。

原因：CSS Grid 的1fr在窄屏上没有起到等宽约束，或者容器有默认边距和最小宽度没有被显式覆盖。

解决：给容器设置max-width和margin: 0 auto，让格子的宽高比强制为1比1。具体做法：

#grid { display: grid; gap: 8px; max-width: min(90vw, 420px); margin: 0 auto; } #grid button { aspect-ratio: 1; padding: 0; height: auto; box-sizing: border-box; }

aspect-ratio: 1只对内容区生效，如果在 button 上同时设置height和aspect-ratio，会以高度为准导致宽度失真。手机上还建议在<meta name="viewport">里加user-scalable=no，避免用户快速连点时触发双击缩放把页面放大。

6. 把成绩变成训练曲线：本地持久化与纵向对比

舒尔特表格的价值不在某一次成绩，而在每周、每月的趋势。用localStorage把每次训练的成绩和误触次数存下来，再做一个简单的标量可视化，你不需要后端也能看到自己的变化。

// 存储成绩到 localStorage function saveResult(size, elapsedSeconds, missCount) { const record = { date: new Date().toISOString(), size: size, elapsed: parseFloat(elapsedSeconds), misses: missCount, }; const key = `schulte_${size}`; const list = JSON.parse(localStorage.getItem(key) || '[]'); list.push(record); const trimmed = list.slice(-50); // 只保留最近50条，避免存储膨胀 localStorage.setItem(key, JSON.stringify(trimmed)); }

读取时按日期排序，用中位数代表当日水平。我不用图表库——在 canvas 上画一条折线只需要30行代码，却能让你一眼看出成绩是否在进步。关键指标是当天所有局数的中位数，不是平均值，这个第3章已解释过。

我的实践习惯是每周日做一次周报：取出最近七天所有记录，画出中位数折线，标注出成绩最好和最差的一天，并回看那天的误触次数。如果最差的一天误触次数也高，基本判断是训练状态问题；如果误触次数正常但速度明显变慢，可能是那天用了带干扰项的模式或换了尺寸，需要复查记录设置。这里有个很容易忽略的细节：换尺寸后，不同尺寸的成绩不能放进同一个序列做趋势对比。5×5的35秒和7×7的80秒没有可比性，必须按size分key存储，各画各的曲线。

做舒尔特表格这个方向，我踩过最大的坑是花大量时间在动画和音效上，最后发现这些装饰干扰了用户对数字的辨认——成绩不升反降。把精力放在数据准确性和纵向可追踪性上，才让这个工具真正有价值，毕竟用户坚持训练的行为动力来自看到自己的曲线持续下行。希望这篇笔记能帮到你，也祝你的训练曲线一路向下。

本文还有配套的精品资源，点击获取