用HTML+JavaScript模拟实时车位状态需以数组集中管理状态（如spots=[{id:1,status:'free'}]），绑定data-id精准更新DOM；用CSS Grid布局配合aspect-ratio保证响应式正方形车位；状态展示须颜色+图标+文字三重标识，符合无障碍规范；轮询用setInterval(fetch,5000)避免压测，并处理请求中过渡态。
怎么用 HTML + JavaScript 模拟实时车位状态
纯 HTML 无法“实时”更新数据，必须配合 JavaScript 控制 DOM；所谓“实时展示”，本质是定时拉取或模拟状态变更后重绘 div 或 span 的背景色与文字。别被“实时”二字带偏——先跑通状态切换逻辑，再考虑对接真实 API。
常见错误：直接写死 50 个 <div class="spot">1</div>，但没统一管理状态，导致点击/刷新后状态错乱；或用内联样式硬编码颜色，后期改色要全文件搜索。
- 用数组（如
spots = [{id: 1, status: 'free'}, {id: 2, status: 'occupied'}]）集中存状态，所有渲染、更新都基于它 - 每个车位 DOM 绑定唯一
data-id，例如<div class="spot" data-id="1"></div>，方便 JS 精准定位 - 状态变更后调用统一函数
renderSpots()重绘，而不是手动改每个元素的style.backgroundColor
车位格子怎么写才容易维护和响应式
用 CSS Grid 布局比浮动或 inline-block 更稳：列数固定（比如每行 10 个），自动换行，缩放时也能保持对齐。别用表格（<table>）——语义不符，且后续加交互（如 hover 提示、点击弹窗）会多写一堆兼容代码。
容易踩的坑：给每个车位设固定宽高（如 width: 60px; height: 60px），结果在手机上挤成一团。应该用相对单位 + minmax()。
立即学习“前端免费学习笔记（深入）”；
- 容器设
display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr))，自动适配屏幕宽度 - 车位元素用
aspect-ratio: 1保证正方形，避免横竖不一致 - 状态标识不用图片，用伪元素
::before叠加小圆点，减少 HTTP 请求
如何让“空闲/占用/维修”三种状态一目了然
颜色不是越艳越好。实测：纯红（#f00）和纯绿（#0f0）在强光屏或色弱用户下难以区分；灰色（#999）表“维修”易被忽略。应选有明度差、符合通用习惯的组合。
更关键的是——不能只靠颜色传达信息。WCAG 要求至少两种区分方式（颜色 + 文字 + 图标）。
- 空闲：浅绿背景 + ✅ 图标 + “空”文字（
color: #28a745） - 占用：浅红背景 + ❌ 图标 + “占”文字（
color: #dc3545） - 维修：浅灰背景 + ⚙️ 图标 + “修”文字（
color: #6c757d） - 所有文字用
font-size: 12px，确保小屏可读；图标用 Unicode 字符，免加载字体文件
想连真实后端？先搞懂这三处接口对接点
本地开发时用 fetch('/api/spots') 肯定 404。必须明确：你当前是在 mock 数据，还是已部署后端？很多新手卡在这一步，反复刷页面却看不到变化，其实是请求根本没发出去。
检查顺序比写代码还重要：先看浏览器开发者工具 Network 标签页里有没有请求发出 → 是否 200 → 返回 JSON 结构是否匹配前端预期（比如字段名是 is_occupied 还是 status）。
- mock 方案：用
setTimeout模拟延时，返回静态数组，验证 UI 流程走通 - 真实接口：确保后端响应头含
Access-Control-Allow-Origin: *（开发期），否则浏览器直接拦截 - 轮询频率别设太密：用
setInterval(getSpotStatus, 5000)而非 1000ms，避免压垮测试服务器
真正难的不是画格子，而是状态同步的时机——比如用户刚点“锁定车位”，后端还没返回成功，UI 就该立刻变黄（提示处理中），而不是等接口回来才动。这个过渡态，90% 的入门 demo 都漏了。
