用js怎么写五星评价

用JavaScript实现五星评价系统

在开发网页应用时，五星评价系统是一个常见的功能。使用JavaScript、HTML、CSS可以轻松实现。具体步骤包括：创建HTML结构、设计CSS样式、编写JavaScript逻辑。本文将详细介绍如何实现一个简洁且功能完备的五星评价系统。

一、HTML结构

首先，我们需要定义HTML结构来展示五颗星。每颗星可以是一个按钮或一个图标。以下是一个基本的HTML模板：

<!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="rating">
        <span class="star" data-value="5">&#9733;</span>
        <span class="star" data-value="4">&#9733;</span>
        <span class="star" data-value="3">&#9733;</span>
        <span class="star" data-value="2">&#9733;</span>
        <span class="star" data-value="1">&#9733;</span>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、CSS样式

为星星添加基本样式，使其在页面上居中显示，并添加悬停效果：

.rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    padding: 10px;
}
.star {
    font-size: 2em;
    color: gray;
    cursor: pointer;
    transition: color 0.2s;
}
.star:hover,
.star:hover ~ .star {
    color: gold;
}
.star.selected {
    color: gold;
}

三、JavaScript逻辑

使用JavaScript为每颗星添加点击事件和悬停效果。通过事件委托处理星级选择和展示。

document.addEventListener('DOMContentLoaded', function() {
    const stars = document.querySelectorAll('.star');
    let selectedRating = 0;
    // 添加悬停效果
    stars.forEach(star => {
        star.addEventListener('mouseover', handleMouseOver);
        star.addEventListener('mouseout', handleMouseOut);
        star.addEventListener('click', handleClick);
    });
    function handleMouseOver(event) {
        const value = event.target.getAttribute('data-value');
        highlightStars(value);
    }
    function handleMouseOut(event) {
        highlightStars(selectedRating);
    }
    function handleClick(event) {
        selectedRating = event.target.getAttribute('data-value');
        highlightStars(selectedRating);
        console.log('Selected rating:', selectedRating);
    }
    function highlightStars(value) {
        stars.forEach(star => {
            if (star.getAttribute('data-value') <= value) {
                star.classList.add('selected');
            } else {
                star.classList.remove('selected');
            }
        });
    }
});

四、扩展功能

1、保存用户评价

为了保存用户的评价，可以将用户的选择发送到服务器。这可以通过AJAX请求实现：

function handleClick(event) {
    selectedRating = event.target.getAttribute('data-value');
    highlightStars(selectedRating);
    // 发送评价到服务器
    fetch('/submit-rating', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ rating: selectedRating })
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

2、显示平均评分

除了保存用户的评价，我们还可以显示当前的平均评分：

<p>当前平均评分: <span id="average-rating">4.2</span></p>

document.addEventListener('DOMContentLoaded', function() {
    // 其他代码...
    // 获取并显示当前平均评分
    fetch('/get-average-rating')
    .then(response => response.json())
    .then(data => {
        document.getElementById('average-rating').textContent = data.averageRating;
    })
    .catch(error => {
        console.error('Error:', error);
    });
});

五、总结

通过以上步骤，我们成功实现了一个简洁且功能完备的五星评价系统。关键步骤包括：创建HTML结构、设计CSS样式、编写JavaScript逻辑，并扩展保存用户评价和显示平均评分的功能。希望这篇文章能帮助你更好地理解和实现五星评价系统。如果你需要一个更强大的项目管理系统来协助团队管理，可以考虑使用研发项目管理系统PingCode和通用项目协作软件Worktile。