JavaScript 中怎么实现评分组件的星级点亮交互效果-js教程-PHP中文网

纯javascript实现星级评分组件，通过监听mouseover、click、mouseleave事件动态点亮星星并记录分数，支持鼠标交互与状态持久化。

javascript 中怎么实现评分组件的星级点亮交互效果

用纯 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）事件，配合状态管理：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

鼠标移入某颗星时：点亮它和它前面所有星（高亮到当前 index）
点击某颗星时：固定选中该分值，保存到 hidden input，并阻止后续 hover 影响已选状态
鼠标离开整个区域时：如果还没点击过，恢复初始状态（全灰）；如果已点击，则保持点亮

示例代码：

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 </p><p>function resetStars() {
stars.forEach(s => s.style.color = '#ccc');
}</p>

增强体验的小技巧

用 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 后的状态还原，或没保存到表单字段导致提交失败。按上面逻辑实现，交互清晰、状态可控、兼容性好。