如何用js做星星评价

如何用JS做星星评价

在网页开发中，使用JavaScript创建星级评价系统是一种常见且有效的方式。它能为用户提供直观的评分机制、提高用户体验、并便于开发者收集反馈数据。下面我们将详细讲解如何利用JavaScript实现一个星星评价系统的步骤。

一、设置HTML结构

首先，我们需要在HTML中创建一个基本的结构来显示星星。一个简单的方式是使用<span>标签来代表星星。

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

在这个结构中，每个<span>标签代表一个星星，并使用data-value属性来存储它的评分值。

二、添加CSS样式

接下来，我们需要通过CSS来美化星星，并在用户悬停时改变颜色。

.star-rating {
    unicode-bidi: bidi-override;
    direction: rtl;
    font-size: 2rem;
}
.star {
    cursor: pointer;
    color: #ccc;
}
.star:hover,
.star:hover ~ .star {
    color: #ff5a00;
}

在这个样式中，我们使用了unicode-bidi和direction属性来改变星星显示的顺序，以便我们可以从右到左进行操作。同时，cursor: pointer使星星在悬停时显示为手型，提升用户体验。

三、编写JavaScript功能

最后，我们需要编写JavaScript来实现星星的评分功能，包括用户点击星星时的评分记录以及交互效果。

document.addEventListener('DOMContentLoaded', function() {
    const stars = document.querySelectorAll('.star');
    stars.forEach(star => {
        star.addEventListener('click', setRating);
        star.addEventListener('mouseover', addHoverEffect);
        star.addEventListener('mouseout', removeHoverEffect);
    });
    function setRating(event) {
        const value = event.target.getAttribute('data-value');
        stars.forEach(star => {
            star.style.color = star.getAttribute('data-value') <= value ? '#ff5a00' : '#ccc';
        });
        console.log(`User rated: ${value} stars`);
    }
    function addHoverEffect(event) {
        const value = event.target.getAttribute('data-value');
        stars.forEach(star => {
            star.style.color = star.getAttribute('data-value') <= value ? '#ff5a00' : '#ccc';
        });
    }
    function removeHoverEffect() {
        stars.forEach(star => {
            star.style.color = '#ccc';
        });
    }
});

在这个JavaScript代码中，我们为每个星星添加了点击和悬停事件监听器。当用户点击星星时，setRating函数会被调用，并根据点击的星星值来改变所有星星的颜色。悬停时，addHoverEffect函数会改变星星颜色，而removeHoverEffect函数会重置星星颜色。

四、提高用户体验与功能扩展

1、增加评分提示

为了进一步提升用户体验，我们可以在用户悬停星星时显示一个评分提示。

<div class="rating-tooltip"></div>

.rating-tooltip {
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    visibility: hidden;
    font-size: 0.8rem;
}

const tooltip = document.querySelector('.rating-tooltip');
stars.forEach(star => {
    star.addEventListener('mousemove', updateTooltip);
    star.addEventListener('mouseout', hideTooltip);
});
function updateTooltip(event) {
    const value = event.target.getAttribute('data-value');
    tooltip.innerText = `${value} 星`;
    tooltip.style.left = `${event.pageX}px`;
    tooltip.style.top = `${event.pageY - 25}px`;
    tooltip.style.visibility = 'visible';
}
function hideTooltip() {
    tooltip.style.visibility = 'hidden';
}

2、保存评分数据

为了保存用户的评分数据，我们可以将评分值发送到服务器。

function setRating(event) {
    const value = event.target.getAttribute('data-value');
    stars.forEach(star => {
        star.style.color = star.getAttribute('data-value') <= value ? '#ff5a00' : '#ccc';
    });
    console.log(`User rated: ${value} stars`);
    // 发送评分值到服务器
    fetch('/save-rating', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ rating: value })
    })
    .then(response => response.json())
    .then(data => console.log('Success:', data))
    .catch((error) => console.error('Error:', error));
}

五、总结

通过上述步骤，我们已经创建了一个功能完善的星星评价系统。这个系统不仅具有基本的评分功能，还包括悬停效果、评分提示以及数据保存功能。这种评价系统不仅能提升用户的交互体验，还能帮助开发者收集用户反馈，从而优化产品和服务。

在实际应用中，我们还可以结合项目管理系统如研发项目管理系统PingCode和通用项目协作软件Worktile来管理和分析用户的评分数据，从而进一步提升项目的质量和效率。

希望这篇文章对你有所帮助，如果你有任何疑问或需要进一步的指导，请随时联系我。