答案：通过html构建五星结构，css设置样式与悬停效果，javaScript实现点击评分与交互反馈。具体描述：使用span标签创建5个星星并设置data-value；CSS定义默认灰色和悬停黄色，并添加过渡动画；js为每个星绑定click和mouseover事件，点击时更新评分并高亮对应星，悬停时预览评分，离开后保留已选状态，最后可扩展半星或存储功能。
制作一个简单的星级评分系统，可以通过 HTML、CSS 和 javascript 实现。用户点击星星图标即可选择评分，鼠标悬停时高亮显示当前选中及之前的星，提升交互体验。下面是一个完整的实现教程。
1. 基础HTML结构
首先创建包含5个星星图标的容器，每个星星用一个标签表示，便于后续绑定事件。
<div class="star-rating"> <span class="star" data-value="1">★</span> <span class="star" data-value="2">★</span> <span class="star" data-value="3">★</span> <span class="star" data-value="4">★</span> <span class="star" data-value="5">★</span> </div> <p>当前评分：<span id="rating-value">0</span></p>
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 或后端读取初始值
基本上就这些。不复杂但容易忽略细节，比如悬停恢复时要判断是否已选中。只要结构清晰，事件处理得当，就能做出流畅的星级评分效果。