HTML5网页如何制作评分组件 HTML5网页星星评分的实现方案-html教程-PHP中文网

HTML5网页如何制作评分组件 HTML5网页星星评分的实现方案

雪夜

发布： 2025-10-22 21:40:01

原创

1351人浏览过

答案：通过HTML、CSS和JavaScript实现星星评分组件，使用Unicode星号或图标构建五星结构，CSS定义悬停与选中样式，JavaScript添加点击交互，支持状态保留与评分输出，结合ARIA属性和键盘操作提升可访问性，可扩展为Font Awesome图标优化视觉效果。

html5网页如何制作评分组件 html5网页星星评分的实现方案

在HTML5网页中实现星星评分组件，可以通过纯HTML、CSS和少量JavaScript来完成。这种评分组件常用于用户评价系统，比如商品打分、评论反馈等场景。下面介绍一种简洁实用的实现方案。

使用HTML与CSS构建静态星星

通过Unicode字符或字体图标（如Font Awesome）可以轻松显示星星图形。以下是基于Unicode星号（★）的基础结构：

★ ★ ★ ★ ★

为了控制可点击区域并区分“已选”和“未选”状态，建议用列表或一组标签元素来表示每一颗星。

<div class="rating">
  <span data-value="1">★</span>
  <span data-value="2">★</span>
  <span data-value="3">★</span>
  <span data-value="4">★</span>
  <span data-value="5">★</span>
</div>

登录后复制

CSS部分设置默认样式，并定义悬停和选中效果：

立即学习“前端免费学习笔记（深入）”；

.rating {
  font-size: 30px;
  color: #ddd;
  cursor: pointer;
}

.rating span {
  transition: color 0.2s;
}

.rating span:hover,
.rating span:hover ~ span {
  color: #ffcc00;
}

.rating .selected {
  color: #f9c80e;
}

登录后复制

添加JavaScript实现交互逻辑

为了让用户点击后保留评分结果，需要加入简单的脚本监听点击事件：

Remove.bg

AI在线抠图软件，图片去除背景

102

查看详情

document.querySelectorAll('.rating span').forEach(item => {
  item.addEventListener('click', function() {
    // 移除之前的选择状态
    document.querySelectorAll('.rating span').forEach(s => s.classList.remove('selected'));

    // 给当前及之前的星星添加选中样式
    this.classList.add('selected');
    this.previousElementSibling?.classList.add('selected');
    this.previousElementSibling?.previousElementSibling?.classList.add('selected');
    this.previousElementSibling?.previousElementSibling?.previousElementSibling?.classList.add('selected');
    this.previousElementSibling?.previousElementSibling?.previousElementSibling?.previousElementSibling?.classList.add('selected');

    // 输出评分值
    console.log('评分:', this.getAttribute('data-value'));
  });
});

登录后复制

更简洁的方式是利用父容器遍历所有子元素：

item.addEventListener('click', function() {
  const value = this.getAttribute('data-value');
  const stars = document.querySelectorAll('.rating span');

  stars.forEach(star => {
    star.classList.toggle('selected', star.getAttribute('data-value') <= value);
  });

  console.log('评分:', value);
});

登录后复制