html函数如何创建星级评分系统 html函数表单星标控件的技巧

星级评分系统是前端交互场景中非常实用的组件，常被用于商品评价、内容打分、服务反馈等场景，核心是通过可点击的星标让用户选择对应分值，同时支持分值回显与表单提交。实现这类组件不需要依赖复杂的第三方库，通过原生HTML配合JavaScript函数就能完成，还能灵活适配不同的样式和交互需求。

基础HTML结构搭建

首先我们需要搭建星标的基础容器结构，每个星标用<span>或者<i>标签表示，整体放在一个容器div中，同时预留隐藏的表单输入框用来存储用户选择的分值，方便后续表单提交。

<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>
  <input type="hidden" name="score" id="scoreInput" value="0">
</div>

核心交互JavaScript函数实现

接下来需要编写JavaScript函数处理星标的点击、悬停、离开等交互逻辑，核心函数包括初始化星标状态、处理鼠标悬停高亮、处理点击确认分值、处理鼠标离开恢复状态这几个部分。

// 获取所有星标元素和隐藏输入框
const stars = document.querySelectorAll('.star');
const scoreInput = document.getElementById('scoreInput');
let currentScore = 0; // 当前选中的分值

// 初始化星标状态的函数
function initStars() {
  const initScore = parseInt(scoreInput.value);
  if (initScore > 0) {
    currentScore = initScore;
    updateStarDisplay(initScore);
  }
}

// 更新星标显示状态的函数
function updateStarDisplay(score) {
  stars.forEach(star => {
    const value = parseInt(star.dataset.value);
    if (value <= score) {
      star.textContent = '★'; // 选中状态显示实心星
      star.style.color = '#ffc107';
    } else {
      star.textContent = '☆'; // 未选中状态显示空心星
      star.style.color = '#ddd';
    }
  });
}

// 处理鼠标悬停事件的函数
function handleStarHover(e) {
  const hoverValue = parseInt(e.target.dataset.value);
  updateStarDisplay(hoverValue);
}

// 处理鼠标离开事件的函数
function handleStarLeave() {
  updateStarDisplay(currentScore);
}

// 处理星标点击的函数
function handleStarClick(e) {
  currentScore = parseInt(e.target.dataset.value);
  scoreInput.value = currentScore; // 将分值存入隐藏输入框
  updateStarDisplay(currentScore);
}

// 绑定事件监听
stars.forEach(star => {
  star.addEventListener('mouseover', handleStarHover);
  star.addEventListener('mouseleave', handleStarLeave);
  star.addEventListener('click', handleStarClick);
});

// 初始化组件
initStars();

样式优化技巧

为了让星标控件更美观，可以通过CSS调整星标的大小、间距、过渡效果，提升用户交互体验。

.star-rating {
  display: flex;
  gap: 8px;
  font-size: 28px;
  cursor: pointer;
  user-select: none;
}

.star {
  transition: transform 0.2s ease, color 0.2s ease;
}

.star:hover {
  transform: scale(1.2);
}

#scoreInput {
  display: none;
}

表单适配与扩展技巧

如果需要在表单中提交评分数据，只需要将隐藏输入框的name属性设置为后端接收的字段名即可，提交表单时会自动携带分值。此外还可以扩展一些实用功能：

• 支持半星评分：可以给每个星标绑定两个点击区域，分别对应0.5和1的分值，调整data-value为小数即可
• 只读模式：如果需要展示已有评分不允许修改，可以给容器添加readonly类，移除所有事件监听，只调用updateStarDisplay函数显示对应分值
• 自定义星标样式：可以替换星标内容为自定义图标，比如用字体图标库的图标替代默认的☆和★

半星评分扩展实现示例

如果需要支持半星选择，可以调整HTML结构和交互逻辑，给每个星标划分左右两个点击区域：

<div class="star-rating-half">
  <span class="star-half" data-value="0.5">☆</span>
  <span class="star-half" data-value="1">☆</span>
  <span class="star-half" data-value="1.5">☆</span>
  <span class="star-half" data-value="2">☆</span>
  <span class="star-half" data-value="2.5">☆</span>
  <span class="star-half" data-value="3">☆</span>
  <span class="star-half" data-value="3.5">☆</span>
  <span class="star-half" data-value="4">☆</span>
  <span class="star-half" data-value="4.5">☆</span>
  <span class="star-half" data-value="5">☆</span>
  <input type="hidden" name="halfScore" id="halfScoreInput" value="0">
</div>

对应的交互函数只需要调整updateStarDisplay的逻辑，根据传入的小数值判断每个星标的显示状态，比如分值为2.5时，前2个星标显示实心，第3个星标显示半星样式即可。

HTMLJavaScript星级评分系统表单控件前端交互修改时间：2026-06-03 03:04:19