评价几颗心怎么js

要在JavaScript中实现一个简单的评分系统，例如评价几颗心（星星），可以使用HTML和JavaScript结合来完成。以下是一个详细的示例，包括HTML结构、CSS样式和JavaScript逻辑。

HTML结构

首先，创建一个HTML文件，其中包含五个星星图标。你可以使用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>Star Rating System</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .star-rating {
            display: flex;
            flex-direction: row;
        }
        .star {
            font-size: 2rem;
            cursor: pointer;
        }
        .star.checked {
            color: gold;
        }
    </style>
</head>
<body>
    <div class="star-rating">
        <i class="star fa fa-star" data-value="1"></i>
        <i class="star fa fa-star" data-value="2"></i>
        <i class="star fa fa-star" data-value="3"></i>
        <i class="star fa fa-star" data-value="4"></i>
        <i class="star fa fa-star" data-value="5"></i>
    </div>
    <script>
        const stars = document.querySelectorAll('.star');
        stars.forEach(star => {
            star.addEventListener('click', () => {
                const value = star.getAttribute('data-value');
                stars.forEach(s => {
                    s.classList.remove('checked');
                });
                for(let i = 0; i < value; i++) {
                    stars[i].classList.add('checked');
                }
            });
        });
    </script>
</body>
</html>

解释

HTML部分：
- 使用Font Awesome库来显示星星图标。每个星星图标是一个 <i> 元素，并且有一个 data-value 属性来表示星星的数值。
- 包含一个 div 容器来包裹所有星星图标。
CSS部分：
- .star-rating 类用于将星星图标按行排列。
- .star 类设置星星图标的大小和鼠标指针样式。
- .star.checked 类用于将选中的星星图标变成金色。
JavaScript部分：
- 选择所有星星图标，并为每个星星图标添加一个点击事件监听器。
- 当点击某个星星图标时，获取其 data-value 属性值，并将该值之前的所有星星图标添加 checked 类，使其变为金色。

运行效果

当用户点击某个星星图标时，该星星及其之前的所有星星图标都会变成金色，表示评分成功。

这种实现方式简单直观，适用于大多数前端开发项目。如果需要更复杂的评分系统，比如与后端交互、保存评分数据，可以在此基础上进行扩展。

评价几颗心怎么js

HTML结构

解释

运行效果

相关问答FAQs：