答案：通过HTML构建五星结构，CSS设置样式与悬停效果，JavaScript实现点击评分与交互反馈。具体描述：使用span标签创建5个星星并设置data-value；CSS定义默认灰色和悬停黄色，并添加过渡动画；JS为每个星绑定click和mouseover事件，点击时更新评分并高亮对应星，悬停时预览评分，离开后保留已选状态，最后可扩展半星或存储功能。
制作一个简单的星级评分系统，可以通过 HTML、CSS 和 JavaScript 实现。用户点击星星图标即可选择评分，鼠标悬停时高亮显示当前选中及之前的星，提升交互体验。下面是一个完整的实现教程。
1. 基础HTML结构
首先创建包含5个星星图标的容器，每个星星用一个标签表示，便于后续绑定事件。
当前评分：0
2. 使用CSS美化样式
设置星星的大小、颜色，并定义默认和选中状态的样式。
.star-rating {
font-size: 30px;
color: #ddd;
cursor: pointer;
}
.star {
transition: color 0.2s ease;
}
.star:hover,
.star.active {
color: #ffc107;
}
3. JavaScript实现交互逻辑
为每个星星添加点击和悬停事件，实现评分选择与预览效果。
const stars = document.querySelectorAll('.star');
const ratingValue = document.getElementById('rating-value');
stars.forEach(star => {
// 点击事件：设置评分
star.addEventListener('click', function() {
const value = this.getAttribute('data-value');
ratingValue.textContent = value;
// 移除所有active类
stars.forEach(s => s.classList.remove('active'));
// 给当前及之前星星添加active类
stars.forEach(s => {
if (s.getAttribute('data-value') <= value) {
s.classList.add('active');
}
});
});
// 悬停效果：预览评分
star.addEventListener('mouseover', function() {
const value = this.getAttribute('data-value');
stars.forEach(s => {
if (s.getAttribute('data-value') <= value) {
s.style.color = '#ffc107';
} else {
s.style.color = '#ddd';
}
});
});
// 鼠标离开后恢复原始状态（保留已选中的）
star.addEventListener('mouseout', function() {
stars.forEach(s => {
if (s.classList.contains('active')) {
s.style.color = '#ffc107';
} else {
s.style.color = '#ddd';
}
});
});
});
4. 可选增强功能
可以进一步扩展功能，例如：
- 禁用重复评分：点击已选星星取消评分（设为0）
- 支持半星评分：使用两个字符或SVG图形实现半颗星
- 保存到服务器：通过 fetch 发送评分数据
- 页面加载回显评分：从 localStorage 或后端读取初始值
基本上就这些。不复杂但容易忽略细节，比如悬停恢复时要判断是否已选中。只要结构清晰，事件处理得当，就能做出流畅的星级评分效果。
