js怎么实现五星好评

JS实现五星好评的步骤

要在网页中实现五星好评功能，常用的方法包括使用HTML和CSS创建星星图标、利用JavaScript处理用户交互、动态更新评分显示。以下是具体的实现步骤和详细解析。

一、创建HTML结构

首先，需要在HTML中创建五星好评的基本结构。我们使用<ul>和<li>标签来表示五颗星。每颗星用一个<li>标签表示，并且我们需要给这些标签添加样式和事件监听器。

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

二、添加CSS样式

CSS用于设置星星的样式和布局。我们可以使用伪类选择器来实现鼠标悬停时的动态效果。

/* styles.css */
.star-rating {
    display: inline-block;
    direction: rtl;
}
.stars {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
}
.star {
    font-size: 2rem;
    color: #d3d3d3;
    cursor: pointer;
}
.star:hover,
.star:hover ~ .star {
    color: #f5b301;
}
.star.selected {
    color: #f5b301;
}

三、编写JavaScript代码

JavaScript用于处理用户的交互，即当用户点击星星时，更新评分显示，并且可以将评分结果发送到服务器或用于其他逻辑处理。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    let stars = document.querySelectorAll('.star');
    let rating = 0;
    stars.forEach(star => {
        star.addEventListener('mouseover', function() {
            let currentStarValue = parseInt(star.getAttribute('data-value'));
            highlightStars(currentStarValue);
        });
        star.addEventListener('mouseout', function() {
            highlightStars(rating);
        });
        star.addEventListener('click', function() {
            rating = parseInt(star.getAttribute('data-value'));
            highlightStars(rating);
            console.log(`Current rating is: ${rating}`);
            // Here you can send the rating value to your server if needed
        });
    });
    function highlightStars(value) {
        stars.forEach(star => {
            star.classList.remove('selected');
            if (parseInt(star.getAttribute('data-value')) <= value) {
                star.classList.add('selected');
            }
        });
    }
});

四、详细解析

1、HTML结构

我们使用了一个<ul>列表来放置五个<li>元素，每个<li>元素表示一颗星星，并使用data-value属性来储存每颗星星的评分值。星星字符使用HTML实体★表示。

2、CSS样式

星星样式：我们设置星星的大小为2rem，默认颜色为浅灰色（#d3d3d3），并且当鼠标悬停时，星星颜色变为金色（#f5b301）。
方向：使用direction: rtl;实现从右到左的排列。
选中状态：使用.selected类来表示用户选中的星星，并设置其颜色为金色。

3、JavaScript交互

事件监听：我们为每个星星添加三个事件监听器：mouseover、mouseout、和click。
- mouseover：当鼠标悬停在某颗星星上时，调用highlightStars函数，高亮显示当前及其左侧的星星。
- mouseout：当鼠标移出时，恢复显示当前评分的星星。
- click：当用户点击某颗星星时，更新评分值，并高亮显示评分对应的星星。
highlightStars函数：该函数接收一个数值参数value，遍历所有星星，根据参数值来添加或移除selected类，以实现高亮显示。

五、扩展功能

1、保存评分

可以将评分结果保存到服务器，使用AJAX请求将评分值发送到后端。

function saveRating(rating) {
    fetch('/save-rating', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ rating: rating })
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
    })
    .catch((error) => {
        console.error('Error:', error);
    });
}

在click事件中调用saveRating函数：

star.addEventListener('click', function() {
    rating = parseInt(star.getAttribute('data-value'));
    highlightStars(rating);
    console.log(`Current rating is: ${rating}`);
    saveRating(rating);
});

2、显示当前评分

可以在HTML中添加一个元素，用于显示当前评分值。

<div class="rating-value">当前评分: <span id="rating-value">0</span></div>

在JavaScript中更新评分显示：

function updateRatingDisplay(rating) {
    document.getElementById('rating-value').textContent = rating;
}
star.addEventListener('click', function() {
    rating = parseInt(star.getAttribute('data-value'));
    highlightStars(rating);
    updateRatingDisplay(rating);
    saveRating(rating);
});

六、总结

通过上述步骤，我们实现了一个简单而功能完善的五星好评系统。用户可以通过点击星星来进行评分，评分结果可以动态显示并发送到服务器保存。此实现方式不仅简单实用，而且容易扩展，可以根据具体需求添加更多功能。例如，可以结合研发项目管理系统PingCode，和通用项目协作软件Worktile，实现更加复杂的项目评分系统。