星星评分用js怎么写

星星评分用JS实现的方法包括以下几个核心步骤：创建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>Star Rating System</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="star-rating">
        <span data-value="1" class="star">&#9733;</span>
        <span data-value="2" class="star">&#9733;</span>
        <span data-value="3" class="star">&#9733;</span>
        <span data-value="4" class="star">&#9733;</span>
        <span data-value="5" class="star">&#9733;</span>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、CSS样式设计

设计一个漂亮的星星评分系统需要用到CSS。通过CSS，我们可以设置星星的大小、颜色、间距等属性，使其看起来更加美观。

/* styles.css */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}
.star-rating {
    display: flex;
    direction: rtl; /* 从右到左排列星星 */
}
.star {
    font-size: 2rem;
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s;
}
.star:hover,
.star:hover ~ .star {
    color: #ff0;
}
.star.selected,
.star.selected ~ .star {
    color: #ff0;
}

三、JavaScript逻辑实现

通过JavaScript，我们可以实现星星评分系统的交互功能。用户点击星星后，系统将记录评分，并将星星变为选中状态。

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const stars = document.querySelectorAll('.star');
    stars.forEach(star => {
        star.addEventListener('click', handleStarClick);
        star.addEventListener('mouseover', handleStarMouseOver);
        star.addEventListener('mouseout', handleStarMouseOut);
    });
    function handleStarClick(event) {
        const selectedStar = event.target;
        const rating = selectedStar.getAttribute('data-value');
        stars.forEach(star => {
            star.classList.remove('selected');
            if (star.getAttribute('data-value') <= rating) {
                star.classList.add('selected');
            }
        });
    }
    function handleStarMouseOver(event) {
        const hoveredStar = event.target;
        const rating = hoveredStar.getAttribute('data-value');
        stars.forEach(star => {
            star.classList.remove('hover');
            if (star.getAttribute('data-value') <= rating) {
                star.classList.add('hover');
            }
        });
    }
    function handleStarMouseOut() {
        stars.forEach(star => {
            star.classList.remove('hover');
        });
    }
});

四、扩展功能

除了基本的星星评分功能，我们还可以进一步扩展功能，使其更加实用和智能。

1、保存评分数据

为了使评分数据持久化，我们可以使用浏览器的LocalStorage来保存用户的评分。

function handleStarClick(event) {
    const selectedStar = event.target;
    const rating = selectedStar.getAttribute('data-value');
    stars.forEach(star => {
        star.classList.remove('selected');
        if (star.getAttribute('data-value') <= rating) {
            star.classList.add('selected');
        }
    });
    localStorage.setItem('rating', rating);
}
document.addEventListener('DOMContentLoaded', () => {
    const savedRating = localStorage.getItem('rating');
    if (savedRating) {
        stars.forEach(star => {
            star.classList.remove('selected');
            if (star.getAttribute('data-value') <= savedRating) {
                star.classList.add('selected');
            }
        });
    }
});

2、动态生成星星

为了使评分系统更加灵活，我们可以通过JavaScript动态生成星星，这样可以方便地改变星星的数量。

document.addEventListener('DOMContentLoaded', () => {
    const starRatingContainer = document.querySelector('.star-rating');
    const starCount = 5; // 你可以改变这个数值来生成不同数量的星星
    for (let i = 1; i <= starCount; i++) {
        const star = document.createElement('span');
        star.classList.add('star');
        star.setAttribute('data-value', i);
        star.innerHTML = '&#9733;';
        star.addEventListener('click', handleStarClick);
        star.addEventListener('mouseover', handleStarMouseOver);
        star.addEventListener('mouseout', handleStarMouseOut);
        starRatingContainer.appendChild(star);
    }
    const savedRating = localStorage.getItem('rating');
    if (savedRating) {
        const stars = document.querySelectorAll('.star');
        stars.forEach(star => {
            star.classList.remove('selected');
            if (star.getAttribute('data-value') <= savedRating) {
                star.classList.add('selected');
            }
        });
    }
});

五、总结

通过本文，我们详细介绍了如何使用HTML、CSS和JavaScript实现一个星星评分系统。首先，我们设计了HTML结构，确保系统有一个基础的布局。接着，通过CSS，我们美化了星星评分系统，使其更具吸引力。最后，通过JavaScript，我们实现了星星评分系统的交互功能，使用户能够点击星星进行评分，并将评分结果保存到LocalStorage中。另外，我们还介绍了如何通过JavaScript动态生成星星，进一步增强了系统的灵活性。

无论是简单的评分功能，还是复杂的交互效果，只要掌握了基本的HTML、CSS和JavaScript知识，你都可以根据需要进行扩展和调整，打造出符合自己需求的星星评分系统。