js星星评分怎么算

js星星评分可以通过创建一个评分组件来实现，主要步骤包括创建HTML结构、使用CSS进行样式设计、用JavaScript处理交互逻辑。具体步骤如下：创建一个包含星星图标的HTML结构、使用CSS定义星星的样式和状态、通过JavaScript监听用户的点击事件并更新评分值。以下将详细描述如何实现每一个步骤。

一、创建HTML结构

首先，我们需要一个基本的HTML结构来包含星星图标。可以使用<ul>和<li>标签来实现，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Star Rating</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="star-rating">
        <ul>
            <li data-value="1">&#9733;</li>
            <li data-value="2">&#9733;</li>
            <li data-value="3">&#9733;</li>
            <li data-value="4">&#9733;</li>
            <li data-value="5">&#9733;</li>
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、使用CSS进行样式设计

接下来，我们通过CSS来定义星星的样式和不同状态下的显示效果。可以用以下CSS代码：

body {
    font-family: Arial, sans-serif;
}
.star-rating {
    display: inline-block;
    font-size: 0;
}
.star-rating ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.star-rating li {
    display: inline-block;
    font-size: 2em;
    color: #ccc;
    cursor: pointer;
}
.star-rating li.selected,
.star-rating li:hover,
.star-rating li:hover ~ li {
    color: #f5b301;
}

三、用JavaScript处理交互逻辑

最后，我们需要通过JavaScript来监听用户的点击事件，并根据用户的选择更新评分值。以下是JavaScript代码示例：

document.addEventListener('DOMContentLoaded', function() {
    const stars = document.querySelectorAll('.star-rating li');
    stars.forEach(star => {
        star.addEventListener('click', function() {
            const rating = this.getAttribute('data-value');
            updateRating(rating);
        });
        star.addEventListener('mouseover', function() {
            const hoverValue = this.getAttribute('data-value');
            highlightStars(hoverValue);
        });
        star.addEventListener('mouseout', function() {
            const rating = document.querySelector('.star-rating ul').getAttribute('data-selected');
            highlightStars(rating);
        });
    });
    function updateRating(rating) {
        document.querySelector('.star-rating ul').setAttribute('data-selected', rating);
        highlightStars(rating);
    }
    function highlightStars(value) {
        stars.forEach(star => {
            if (star.getAttribute('data-value') <= value) {
                star.classList.add('selected');
            } else {
                star.classList.remove('selected');
            }
        });
    }
});

四、实现和优化

1、动态评分更新

为了使评分系统更加动态，我们可以添加一些功能，例如显示当前评分值。在HTML中，可以增加一个显示评分值的元素：

<div class="rating-value">Rating: <span id="rating-value">0</span></div>

然后在JavaScript中更新评分值：

function updateRating(rating) {
    document.querySelector('.star-rating ul').setAttribute('data-selected', rating);
    document.getElementById('rating-value').textContent = rating;
    highlightStars(rating);
}

2、保存评分

为了在页面刷新后保留用户的评分，我们可以使用浏览器的localStorage来保存评分值：

document.addEventListener('DOMContentLoaded', function() {
    const stars = document.querySelectorAll('.star-rating li');
    const savedRating = localStorage.getItem('rating') || 0;
    updateRating(savedRating);
    stars.forEach(star => {
        star.addEventListener('click', function() {
            const rating = this.getAttribute('data-value');
            localStorage.setItem('rating', rating);
            updateRating(rating);
        });
    });
    // Rest of the code...
});

五、总结

通过以上步骤，我们实现了一个基本的JS星星评分系统。这个系统包括HTML结构、CSS样式设计和JavaScript交互逻辑。通过动态更新评分值和使用localStorage保存用户评分，我们可以为用户提供更好的体验。这种星星评分系统可以广泛应用于各种Web项目中，如产品评价、文章评分等。如果你的项目需要更复杂的功能或团队协作，可以考虑使用研发项目管理系统PingCode和通用项目协作软件Worktile来提升工作效率和团队协作能力。