纯JavaScript实现星级评分组件，通过监听mouseover、click、mouseleave事件动态点亮星星并记录分数，支持鼠标交互与状态持久化。
用纯 JavaScript 实现星级评分组件的点亮交互，核心是监听鼠标事件、动态更新 DOM 状态，并记录用户选择的分数。不需要框架，几行代码就能搞定。
HTML 结构：用 span 模拟星星
每个星星用一个 span 表示，加统一类名便于操作，同时用 data-index 标记顺序：
<div class="star-rating"> <span class="star" data-index="1">★</span> <span class="star" data-index="2">★</span> <span class="star" data-index="3">★</span> <span class="star" data-index="4">★</span> <span class="star" data-index="5">★</span> </div> <input type="hidden" id="rating-value" value="">
JavaScript 逻辑：三步完成交互
绑定鼠标进入（mouseover）、点击（click）和离开（mouseleave）事件，配合状态管理：
- 鼠标移入某颗星时：点亮它和它前面所有星（高亮到当前 index）
- 点击某颗星时：固定选中该分值，保存到 hidden input，并阻止后续 hover 影响已选状态
- 鼠标离开整个区域时：如果还没点击过，恢复初始状态（全灰）；如果已点击，则保持点亮
示例代码：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
const stars = document.querySelectorAll('.star');
const ratingInput = document.getElementById('rating-value');
let selectedRating = 0;
<p>stars.forEach(star => {
star.addEventListener('mouseover', () => {
if (selectedRating === 0) {
const index = parseInt(star.dataset.index);
highlightStars(index);
}
});</p><p>star.addEventListener('click', () => {
selectedRating = parseInt(star.dataset.index);
ratingInput.value = selectedRating;
highlightStars(selectedRating);
});</p><p>star.addEventListener('mouseleave', () => {
if (selectedRating === 0) {
resetStars();
}
});
});</p><p>function highlightStars(count) {
stars.forEach((s, i) => {
s.style.color = i < count ? '#FFD700' : '#ccc';
});
}</p><p>function resetStars() {
stars.forEach(s => s.style.color = '#ccc');
}增强体验的小技巧
- 用
cursor: pointer给.star加上手型光标，提升可感知性 - 支持键盘操作：给容器加
tabindex="0"，监听keydown（如 ←→ 方向键或数字键） - 添加半星效果？把 ★ 换成两个重叠的 ★ 和 ☆，用
clip-path或背景遮罩控制显示比例 - 提交前校验：确保
ratingInput.value不为空，避免漏评
样式建议（简洁版）
加点基础 CSS 让星星更友好：
.star-rating { font-size: 24px; }
.star {
color: #ccc;
cursor: pointer;
transition: color 0.2s;
margin: 0 2px;
}
.star:hover, .star.active { color: #FFD700; }
/* 可选：禁用文本选中 */
.star-rating { user-select: none; }不复杂但容易忽略细节——比如没处理 mouseleave 后的状态还原，或没保存到表单字段导致提交失败。按上面逻辑实现，交互清晰、状态可控、兼容性好。
