js半颗星效果怎么做

JS半颗星效果实现的核心要点是：创建星星图标、使用CSS控制样式、动态调整星星的显示。 其中，最关键的一点是动态调整星星的显示。我们可以通过JavaScript来实现这一效果，具体来说，可以利用鼠标事件监听和DOM操作来控制星星的显示和隐藏。

一、创建星星图标

首先，我们需要创建一个星星图标。通常，我们会使用Font Awesome或其他图标库来简化这个过程。以下是一个使用Font Awesome的示例：

<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        .star {
            font-size: 30px;
            color: gray;
        }
        .star.filled {
            color: gold;
        }
    </style>
</head>
<body>
    <div id="star-container">
        <i class="fas fa-star star" data-value="1"></i>
        <i class="fas fa-star star" data-value="2"></i>
        <i class="fas fa-star star" data-value="3"></i>
        <i class="fas fa-star star" data-value="4"></i>
        <i class="fas fa-star star" data-value="5"></i>
    </div>
</body>
</html>

二、使用CSS控制样式

通过CSS，我们可以控制星星的样式，包括颜色、大小等。这里，我们已经设置了基础样式，并使用.filled类来表示被填充的星星。

三、动态调整星星的显示

通过JavaScript，我们可以实现动态调整星星显示的功能。这包括监听鼠标事件，并根据鼠标的位置填充相应数量的星星。

以下是一个简单的JavaScript实现：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const stars = document.querySelectorAll('.star');
        stars.forEach(star => {
            star.addEventListener('mouseover', handleMouseOver);
            star.addEventListener('mouseout', handleMouseOut);
            star.addEventListener('click', handleClick);
        });
        let currentRating = 0;
        function handleMouseOver(event) {
            const value = parseInt(event.target.getAttribute('data-value'));
            fillStars(value);
        }
        function handleMouseOut() {
            fillStars(currentRating);
        }
        function handleClick(event) {
            currentRating = parseInt(event.target.getAttribute('data-value'));
            fillStars(currentRating);
        }
        function fillStars(value) {
            stars.forEach(star => {
                if (parseInt(star.getAttribute('data-value')) <= value) {
                    star.classList.add('filled');
                } else {
                    star.classList.remove('filled');
                }
            });
        }
    });
</script>

四、实现半颗星效果

为了实现半颗星效果，我们需要对星星进行进一步细化。可以通过创建两个半星星图标或使用CSS的伪元素来控制。

<style>
    .star-container {
        display: inline-block;
        position: relative;
        font-size: 30px;
    }
    .star-container .star {
        color: gray;
    }
    .star-container .star.filled {
        color: gold;
    }
    .star-container .star.half::before {
        content: 'f005'; /* Font Awesome star icon code */
        position: absolute;
        left: 0;
        width: 50%;
        overflow: hidden;
        color: gold;
    }
</style>

在JavaScript中，我们需要对鼠标事件进行调整，以支持半颗星的显示：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const stars = document.querySelectorAll('.star');
        stars.forEach(star => {
            star.addEventListener('mousemove', handleMouseMove);
            star.addEventListener('mouseout', handleMouseOut);
            star.addEventListener('click', handleClick);
        });
        let currentRating = 0;
        function handleMouseMove(event) {
            const rect = event.target.getBoundingClientRect();
            const xPos = event.clientX - rect.left;
            const value = parseInt(event.target.getAttribute('data-value'));
            const fraction = xPos / rect.width;
            if (fraction > 0.5) {
                fillStars(value);
            } else {
                fillStars(value - 0.5);
            }
        }
        function handleMouseOut() {
            fillStars(currentRating);
        }
        function handleClick(event) {
            const rect = event.target.getBoundingClientRect();
            const xPos = event.clientX - rect.left;
            const value = parseInt(event.target.getAttribute('data-value'));
            const fraction = xPos / rect.width;
            if (fraction > 0.5) {
                currentRating = value;
            } else {
                currentRating = value - 0.5;
            }
            fillStars(currentRating);
        }
        function fillStars(value) {
            stars.forEach(star => {
                star.classList.remove('filled', 'half');
                const starValue = parseInt(star.getAttribute('data-value'));
                if (starValue <= value) {
                    star.classList.add('filled');
                } else if (starValue - 0.5 === value) {
                    star.classList.add('half');
                }
            });
        }
    });
</script>

五、总结

通过上述方法，我们可以实现一个灵活的半颗星效果。关键在于动态调整星星的显示，并且利用CSS来控制星星的样式。通过监听鼠标事件，我们可以精确控制星星的填充状态，从而实现更好的用户体验。

六、项目管理系统推荐

在开发和维护这样的项目时，有效的项目管理系统可以极大地提升团队的效率和协作能力。这里推荐两个系统：

研发项目管理系统PingCode：专为研发团队设计，支持敏捷开发、迭代管理等功能，帮助团队高效协作。
通用项目协作软件Worktile：适用于各类团队，支持任务管理、时间跟踪等功能，是一个灵活且强大的项目管理工具。

通过使用这些项目管理系统，可以帮助团队更好地规划、执行和跟踪项目进展，从而提升整体效率和质量。