引导页须仅对新用户触发一次，核心逻辑为localStorage.getItem('seenIntro') === 'true'；需显式比对字符串'true'，写入时机为跳过或完成时，建议try...catch包裹读写；遮罩层z-index:9999且pointer-events:none，高亮框z-index:10000并挂载body下；定位用getBoundingClientRect()动态计算，监听resize/scroll并节流更新；需考虑多标签、缓存清理等状态同步问题。
引导页不是“做出来就行”，而是必须只对新用户触发一次——否则每次刷新都弹，用户会直接关掉网页。核心判断逻辑就一条：localStorage.getItem('seenIntro') === 'true'，其他都是围绕它展开的修补和适配。
怎么用 localStorage 判断是否首次访问
浏览器不会自动记住用户来过几次，得你自己存标记。关键不是设值，而是读值时的判断方式：
-
localStorage.getItem('seenIntro')未设置时返回null，不是undefined或false，所以不能写!localStorage.seenIntro - 必须显式比较：
localStorage.getItem('seenIntro') === 'true'，避免字符串、布尔混用出错 - 写入时机要明确：在用户点“跳过”或走到最后一步时，执行
localStorage.setItem('seenIntro', 'true') - 建议加
try...catch包裹读写操作，防止用户禁用 storage 或配额超限导致脚本中断
遮罩层和高亮框的 z-index 怎么设才不挡操作
引导层盖住下拉菜单、输入框光标、甚至按钮点击区域，90% 是因为层级没理清。不是堆高数字，而是分层控制：
- 遮罩层（全屏半透明）用
z-index: 9999，position: fixed，并确保pointer-events: none（移动端尤其重要） - 高亮框（抠出目标元素的区域）必须比遮罩层更高：
z-index: 10000，且单独设pointer-events: auto - 目标元素本身不要设
z-index，否则可能被遮罩压住；改用提升其父容器的层级，或临时加isolation: isolate - 如果高亮框被父级
overflow: hidden截断，要把高亮 DOM 挂到document.body下，绕过裁剪限制
怎么动态定位高亮框，避免滚动/缩放后偏移
硬写 CSS left/top 坐标在响应式页面里必崩。真实场景中，目标元素位置是动态的，必须靠 JS 实时算：
立即学习“前端免费学习笔记（深入）”；
- 用
element.getBoundingClientRect()获取目标相对于视口的top、left、width、height - 把高亮层（比如
div#tourHighlight）的style.top、style.left等设为对应值，并保持position: fixed - 必须监听
window.resize和window.scroll，并在回调里重新调用getBoundingClientRect()更新位置 - 注意：滚动时频繁重绘会卡顿，可用
requestAnimationFrame节流，或只在 scroll end 后更新
最容易被忽略的是状态同步问题：用户切标签页、关掉再打开、清缓存、甚至跨设备登录……这些都会让 localStorage 失效或不一致。别假设用户一定按顺序点下一步，也别省略异常处理——引导页崩了，用户第一印象就毁了。
