JavaScript 纯原生实现星级评分控件

Theo

发布时间：2026-10-13 | 4人浏览过

原创

本示例展示如何使用原生 JavaScript 实现一个基于点击的星级评分效果。通过获取 DOM 元素并绑定事件，动态调整星星图标的视觉反馈，适用于无需引入 jQuery 等库的轻量级前端场景。

实现原理与目标

星级评分控件的核心逻辑在于用户点击某一颗星后，该星及其左侧的所有星应显示为“已选/高亮”状态（例如红色），而右侧的星保持默认状态（例如白色）。我们将使用 HTML 表格构建五角星序列，并通过 JavaScript 处理点击事件。

准备条件

确保页面中引入了必要的 <script> 标签，且 HTML 结构包含用于展示星星的容器（如表格）和对应的类名或 ID。

第1步：定义辅助函数以查找索引

首先需要识别用户点击的是哪一颗星。创建一个辅助函数 ArrayIndexOf，用于在数组中查找指定元素的索引位置。

目的： 确定当前点击星星在列表中的相对位置，以便后续遍历修改样式。

参数： arr (数组), element (目标元素)。

代码实现：

function ArrayIndexOf(arr, element) {
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] == element) {
      return i;
    }
  }
  return -1;
}

第2步：初始化事件监听器

在页面加载完成后，遍历所有的星星单元格并绑定点击事件。

入口： 页面加载完成时执行。
动作：

获取评分表格元素 tblRating。
获取表格内所有单元格 tds。
为每个单元格添加 onclick 事件处理程序 tdOnClick。
将鼠标光标设置为手型（pointer）以提升用户体验。

可观察状态： 鼠标悬停在星星上时变为手型，点击后触发样式变化。

function IniEvent() {
  var tbl = document.getElementById("tblRating");
  var tds = tbl.getElementsByTagName("td");
  for (var i = 0; i < tds.length; i++) {
    var td = tds[i];
    td.onclick = tdOnClick;
    td.style.cursor = "pointer";
  }
}

第3步：处理点击逻辑并更新样式

当用户点击某个星星单元格时，执行以下逻辑：

入口： 单击任意星星单元格。
动作：

重新获取表格及所有单元格集合。
调用 ArrayIndexOf 确定当前点击单元格的索引 index。
使用循环将所有索引小于等于 index 的单元格背景色设为红色（高亮）。
使用循环将所有索引大于 index 的单元格背景色设为白色（取消高亮）。

重要参数： CSS 颜色值 "red" 和 "white"。

function tdOnClick() {
  var tbl = document.getElementById("tblRating");
  var tds = tbl.getElementsByTagName("td");
  // 查找当前点击的td的索引
  var index = ArrayIndexOf(tds, this);
  
  // 之前的td改为红色
  for (var i = 0; i <= index; i++) {
    tds[i].style.background = "red";
  }
  // 之后的td改为白色
  for (var i = index + 1; i < tds.length; i++) {
    tds[i].style.background = "white";
  }
}

第4步：构建 HTML 结构并绑定初始化

创建包含5个星星单元格的表格，并在 body 标签的 onload 事件中调用初始化函数。

代码结构：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>动态设置style(评分效果)</title>
  <!-- 在此处插入上述 JS 代码 -->
</head>
<body onload="IniEvent()">
  <table id="tblRating">
    <tr>
      <td>☆</td>
      <td>☆</td>
      <td>☆</td>
      <td>☆</td>
      <td>☆</td>
    </tr>
  </table>
</body>
</html>