引言

星级评分系统是网站和应用程序中常见的一种用户交互方式，它允许用户对产品、服务或内容进行直观的评分。HTML5提供了丰富的API和标签，使得创建交互式星级评分系统变得简单而高效。本文将详细介绍如何使用HTML5和CSS3来打造一个美观且功能齐全的星级评分系统。

系统设计

在设计星级评分系统时，我们需要考虑以下几个关键点：

  1. 评分粒度：决定评分的最小单位，例如半星或全星。
  2. 交互性：用户能否通过鼠标或触摸进行评分。
  3. 响应式设计：系统在不同设备和屏幕尺寸上的适应性。
  4. 视觉反馈：用户在评分时的视觉反馈，如星级的高亮显示。

HTML结构

首先，我们需要构建HTML结构。以下是一个基本的星级评分系统的HTML代码示例：

<div class="star-rating">
  <span class="star" data-value="1">&#9733;</span>
  <span class="star" data-value="2">&#9733;</span>
  <span class="star" data-value="3">&#9733;</span>
  <span class="star" data-value="4">&#9733;</span>
  <span class="star" data-value="5">&#9733;</span>
</div>

在这个例子中，我们使用了五个星号（Unicode字符&#9733;）作为星级的视觉表示，每个星号都有一个data-value属性，表示其对应的评分值。

CSS样式

接下来，我们需要为星级评分系统添加CSS样式。以下是一个简单的CSS样式示例：

.star-rating {
  direction: rtl; /* 从右到左，模拟星级从高到低 */
  font-size: 24px;
  color: #ccc;
}

.star-rating .star {
  cursor: pointer;
  transition: color 0.2s ease;
}

.star-rating .star:hover,
.star-rating .star:hover ~ .star {
  color: #f5a623; /* 鼠标悬停时星号颜色变化 */
}

在这个例子中，我们使用了:hover伪类来改变星号的颜色，从而提供视觉反馈。

JavaScript交互

为了使星级评分系统具有交互性，我们需要使用JavaScript来处理用户的点击事件。以下是一个JavaScript代码示例：

document.addEventListener('DOMContentLoaded', function() {
  var stars = document.querySelectorAll('.star');

  stars.forEach(function(star) {
    star.addEventListener('click', function() {
      var value = star.getAttribute('data-value');
      stars.forEach(function(s) {
        s.style.color = s.getAttribute('data-value') <= value ? '#f5a623' : '#ccc';
      });
    });
  });
});

在这个例子中，我们为每个星号添加了一个点击事件监听器。当用户点击一个星号时，所有星号的颜色将根据点击的星号值进行更新。

响应式设计

为了确保星级评分系统在不同设备和屏幕尺寸上的适应性，我们可以使用媒体查询来调整样式。以下是一个媒体查询的示例：

@media (max-width: 600px) {
  .star-rating {
    font-size: 18px;
  }
}

这个媒体查询将星号的大小调整为更小的值，以适应较小的屏幕。

总结

通过HTML5、CSS3和JavaScript，我们可以轻松地创建一个交互式且响应式的星级评分系统。本文提供的基本示例可以作为构建更复杂评分系统的起点。在实际应用中，可以根据具体需求进行扩展和优化。