用<img>标签循环渲染5颗星级图标最轻量兼容，每颗星根据评分值动态设src：整数部分前为实心，小数≥0.5时对应位为半星，其余为空心；事件绑定容器并计算鼠标位置确定星级；需处理图片加载失败和字符串转浮点。
用 <img> 标签循环渲染星级图标，核心是控制显示数量和状态
直接用 <img> 循环生成 5 颗星是最轻量、兼容性最好、也最容易调试的方式——不需要额外依赖、不触发重排、连 CSS 都可以极简。关键不是“能不能做”，而是“怎么让每颗星知道该显示空心还是实心”。
常见错误是硬编码 5 个 <img> 标签，或者用 JS 拼接字符串后 innerHTML 注入，结果动态更新时丢失事件绑定或状态错乱。
- 推荐用 JS 创建元素并 append，避免 innerHTML 解析开销和 XSS 风险
- 每颗星的
src应根据当前评分值（如rating = 3.7）和索引（i = 0..4）动态决定：
– 若i < Math.floor(rating)→ 实心星
– 若i === Math.floor(rating) && rating % 1 >= 0.5→ 半星（需单独图片）
– 否则 → 空心星 - 别忘了给每颗
<img>加alt="star"和role="img"，否则屏幕阅读器会念出文件名
半星支持必须靠三张图：实心、半星、空心，不能只靠 CSS 裁剪
用单张 SVG 或字体图标做半星虽然省图，但实际项目中容易在缩放、高 DPI 屏幕或低版本浏览器里模糊或错位。<img> 循环方式下，最稳的是准备三张等尺寸 PNG：star-full.png、star-half.png、star-empty.png。
常见坑是把半星逻辑写成 rating > i + 0.5，导致 3.4 分时第 3 颗星（i=2）被误判为半星——正确判断应基于 Math.floor(rating) 定位整数位，再单独检查小数部分是否 ≥ 0.5。
- 示例逻辑（假设
rating = 3.7）：
– i=0,1,2 →src="star-full.png"
– i=3 →src="star-half.png"（因为Math.floor(3.7)===3且3.7%1 >= 0.5）
– i=4 →src="star-empty.png" - 路径必须相对或绝对一致，建议统一放在
/assets/icons/下，避免因 base URL 变化导致 404
交互反馈要绑定到整个容器，而不是单个 <img>
用户点击第 4 颗星，期望设置为 4 分；但如果只给每个 <img> 绑 click，就无法响应“悬停到第 3.5 颗星”的场景，也无法处理鼠标划过时实时预览。所以事件必须挂载在父容器上，靠 event.target 和位置计算反推目标星序号。
- 监听
mouseover和click到容器（如class="star-rating"） - 用
event.clientX - starElement.getBoundingClientRect().left算出鼠标相对容器左边缘的横向偏移 - 除以单颗星宽度（建议固定设为
24px），再取Math.min(5, Math.max(0, Math.ceil(x / 24)))得到目标分值 - 避免对
<img>设置pointer-events: none，否则 touch 设备可能失效
IE11 及以下不支持 classList，但 <img> 循环本身完全兼容
这个方案真正优势在于：所有现代和老旧浏览器都能跑。你不需要 flex、grid 或 aspect-ratio，连 dataset 都不是必须的。唯一要注意的是动态创建 <img> 时，IE11 不支持 new Image() 的参数构造，得用 document.createElement('img')。
容易被忽略的是图片加载失败的 fallback：如果某颗星的 src 404，整个评分条会出现空白缺口。务必加 onerror 回调回退到空心星：
img.onerror = () => { img.src = '/assets/icons/star-empty.png'; };另外，服务端返回的 rating 字段如果是字符串（如 "4.5"），JS 里必须先 parseFloat()，否则 "4.5" > 4 是 true，但 "4.5" % 1 会是 NaN。
