javascript 星级评分效果(手写)

以下是一个简单的JavaScript实现星级评分效果的代码示例。这个示例使用了HTML来创建星级的显示，并使用JavaScript来处理点击事件，以更新选中的星级数。

HTML部分（index.html）：


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>星级评分效果</title>
<style>
    .star {
        color: grey; /* 默认颜色为灰色 */
        cursor: pointer;
    }
    .star.filled {
        color: gold; /* 选中后颜色为金色 */
    }
</style>
</head>
<body>

<div id="star-rating">
    <span class="star">★</span>
    <span class="star">★</span>
    <span class="star">★</span>
    <span class="star">★</span>
    <span class="star">★</span>
</div>

<script src="rating.js"></script>
</body>
</html>

JavaScript部分（rating.js）：


document.addEventListener('DOMContentLoaded', function() {
    const stars = document.querySelectorAll('#star-rating .star');

    stars.forEach((star, index) => {
        star.addEventListener('click', function() {
            // 移除之前所有星星的filled类
            stars.forEach(s => s.classList.remove('filled'));

            // 为当前点击及之前的星星添加filled类
            for (let i = 0; i <= index; i++) {
                stars[i].classList.add('filled');
            }
        });
    });

    // 如果需要处理鼠标悬停效果，可以添加以下代码
    // 注意：这里为了简洁，未添加悬停效果的具体实现
    // 你可以通过添加mouseenter和mouseleave事件监听器来实现
});

在这个例子中，我创建了一个包含五个星星的评分系统。每个星星都是一个``元素，它们默认是灰色的。当用户点击一个星星时，这个星星以及它之前的所有星星都会变成金色，表示用户选中的评分。

请注意，这个示例仅处理了点击事件，如果你还需要处理鼠标悬停（hover）效果，你可以在JavaScript中添加相应的`mouseenter`和`mouseleave`事件监听器，并相应地更新星星的样式。但为了保持代码的简洁性，这里并没有包含悬停效果的实现。