答案：通过HTML、CSS和JavaScript实现可点击评分的星星组件，支持悬停预览与选中状态。1. HTML用data-value标记分数；2. CSS设置默认颜色及悬停高亮；3. JS监听鼠标事件，更新active状态与显示分数；4. 可扩展半星、只读或封装复用。
实现一个简单的评分组件，可以通过点击星星来选择分数，支持鼠标悬停效果和自定义评分数值。以下是使用原生 JavaScript 和简单 HTML/CSS 构建的评分组件示例。
1. HTML 结构
创建一个容器，包含若干代表星星的元素：
<div class="rating" id="rating">
<span data-value="1">★</span>
立即学习“Java免费学习笔记（深入）”；
<span data-value="2">★</span>
<span data-value="3">★</span>
<span data-value="4">★</span>
<span data-value="5">★</span>
</div>
<span id="rating-value">当前评分：0</span>
2. CSS 样式
让星星排列成一行，设置默认颜色和悬停效果：
.rating {
font-size: 30px;
color: #ddd;
user-select: none;
}
.rating span {
cursor: pointer;
transition: color 0.2s;
}
.rating span:hover,
.rating span.active {
color: orange;
}
3. JavaScript 功能逻辑
添加交互行为：悬停预览、点击选中评分：
const ratingEl = document.getElementById('rating');
const valueDisplay = document.getElementById('rating-value');
let currentRating = 0;
// 更新显示的高亮状态
function updateStars(rating) {
Array.from(ratingEl.children).forEach(star => {
if (parseInt(star.dataset.value) <= rating) {
star.classList.add('active');
} else {
star.classList.remove('active');
}
});
}
// 鼠标悬停效果
ratingEl.addEventListener('mouseover', function(e) {
if (e.target.tagName === 'SPAN') {
updateStars(parseInt(e.target.dataset.value));
}
});
// 鼠标离开时恢复到当前评分
ratingEl.addEventListener('mouseout', function() {
updateStars(currentRating);
});
// 点击设置评分
ratingEl.addEventListener('click', function(e) {
if (e.target.tagName === 'SPAN') {
currentRating = parseInt(e.target.dataset.value);
valueDisplay.textContent = `当前评分：${currentRating}`;
}
});
4. 使用说明与扩展建议
这个评分组件轻量且易于集成。你可以根据需要进行以下增强：
- 支持半星评分（通过更复杂的 DOM 或 SVG 实现）
- 添加只读模式
- 封装为可复用函数或类，方便多个实例使用
- 绑定事件回调，比如提交评分
基本上就这些，不复杂但足够实用。
