计算 5 星评级 js - Javascript

如果你正在开发一个应用程序或者网站，你可能需要让用户给你的体验打分。这个功能非常常见，而且也很容易实现，只需要使用 Javascript 就可以了。在这篇文章中，我们将会介绍如何实现一个 5 星评级系统。

HTML

首先，我们需要在 HTML 文件中添加一个包含 5 个星星的容器，以及一个隐藏的文本字段，用于存储用户的评级。HTML 代码如下所示：

<div id="stars">
  <i class="star" data-value="1"></i>
  <i class="star" data-value="2"></i>
  <i class="star" data-value="3"></i>
  <i class="star" data-value="4"></i>
  <i class="star" data-value="5"></i>
</div>
<input type="text" id="rating" name="rating" style="display: none;">

CSS

然后，我们需要为星星添加 CSS 样式。这里我们采用 Font Awesome 的图标作为星星，可以使用 CDN 进行链接，CSS 代码如下所示：

#stars {
  font-size: 30px;
}

.star {
  cursor: pointer;
  color: #ddd;
}

.star.filled {
  color: gold;
}

JavaScript

最后，我们需要编写 JavaScript 代码，将星星与点击事件相关联，并将用户的评级写入文本字段中。JS 代码如下所示：

const stars = document.querySelectorAll(".star");

stars.forEach(function(star) {
  star.addEventListener("click", setRating);
});

function setRating(event) {
  const starClicked = event.target;
  const rating = starClicked.getAttribute("data-value");
  document.getElementById("rating").value = rating;
  stars.forEach(function(star) {
    if (star.getAttribute("data-value") <= rating) {
      star.classList.add("filled");
    } else {
      star.classList.remove("filled");
    }
  });
}

我们使用 querySelectorAll() 选择所有的星星，并将一个 click 事件监听器添加到它们上面。然后，我们执行 setRating() 函数，该函数通过点击的星星的 data-value 属性获取评级值，并将其存储在文本字段中。随后，我们遍历所有的星星，并根据当前点击的星星的评级值，将它们的颜色样式修改。

Markdown

综上，我们通过 HTML、CSS 和 JavaScript 实现了一个 5 星评级系统。你可以将以上代码复制到你自己的网站中，并进行必要的修改。

以下是本文的 Markdown 版本：

# 计算 5 星评级 js - Javascript

如果你正在开发一个应用程序或者网站，你可能需要让用户给你的体验打分。这个功能非常常见，而且也很容易实现，只需要使用 Javascript 就可以了。在这篇文章中，我们将会介绍如何实现一个 5 星评级系统。

## HTML

首先，我们需要在 HTML 文件中添加一个包含 5 个星星的容器，以及一个隐藏的文本字段，用于存储用户的评级。HTML 代码如下所示：

```html
<div id="stars">
  <i class="star" data-value="1"></i>
  <i class="star" data-value="2"></i>
  <i class="star" data-value="3"></i>
  <i class="star" data-value="4"></i>
  <i class="star" data-value="5"></i>
</div>
<input type="text" id="rating" name="rating" style="display: none;">

CSS

然后，我们需要为星星添加 CSS 样式。这里我们采用 Font Awesome 的图标作为星星，可以使用 CDN 进行链接，CSS 代码如下所示：

#stars {
  font-size: 30px;
}

.star {
  cursor: pointer;
  color: #ddd;
}

.star.filled {
  color: gold;
}

JavaScript

最后，我们需要编写 JavaScript 代码，将星星与点击事件相关联，并将用户的评级写入文本字段中。JS 代码如下所示：

const stars = document.querySelectorAll(".star");

stars.forEach(function(star) {
  star.addEventListener("click", setRating);
});

function setRating(event) {
  const starClicked = event.target;
  const rating = starClicked.getAttribute("data-value");
  document.getElementById("rating").value = rating;
  stars.forEach(function(star) {
    if (star.getAttribute("data-value") <= rating) {
      star.classList.add("filled");
    } else {
      star.classList.remove("filled");
    }
  });
}

我们使用 querySelectorAll() 选择所有的星星，并将一个 click 事件监听器添加到它们上面。然后，我们执行 setRating() 函数，该函数通过点击的星星的 data-value 属性获取评级值，并将其存储在文本字段中。随后，我们遍历所有的星星，并根据当前点击的星星的评级值，将它们的颜色样式修改。