js点亮星星怎么写

在网页上实现点亮星星效果的JavaScript代码，可以通过创建一个评分系统来实现。这种系统通常用于收集用户反馈或评价。以下是一个基本的示例，展示如何使用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 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="script.js"></script>
</body>
</html>

二、添加CSS样式

接下来，我们需要为星星添加一些样式，以使其看起来更美观。以下是一个基本的CSS样式示例：

/* styles.css */
.star-rating {
    display: inline-block;
    font-size: 2rem;
}
.star {
    cursor: pointer;
    color: gray;
}
.star:hover,
.star.hover,
.star.selected {
    color: gold;
}

三、编写JavaScript代码

最后，我们需要编写JavaScript代码来实现星星的点亮效果。以下是一个基本的JavaScript实现：

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

四、深入理解JavaScript代码

在这个示例中，我们首先选择所有星星元素，并为每个星星添加鼠标悬停、鼠标移出和点击事件监听器。

handleMouseOver：当鼠标悬停在某个星星上时，获取该星星的评分值，并调用highlightStars函数来点亮所有小于或等于该评分值的星星。
handleMouseOut：当鼠标移出星星容器时，调用highlightStars函数来恢复到当前选择的评分值。
handleClick：当用户点击某个星星时，更新selectedRating变量的值，并调用highlightStars函数来点亮选中的星星。
highlightStars：根据传入的评分值，点亮或熄灭星星。

五、扩展功能

为了让这个评分系统更加实用，我们还可以添加一些额外的功能。例如，显示当前评分值、禁用评分功能、在后端保存评分结果等。以下是一些扩展功能的示例：

1、显示当前评分值

在HTML中添加一个元素来显示当前评分值：

<div class="rating-value">Rating: <span id="rating-value">0</span></div>

在JavaScript中更新评分值的显示：

const ratingValueElement = document.getElementById('rating-value');
function handleClick(event) {
    selectedRating = event.target.getAttribute('data-value');
    ratingValueElement.textContent = selectedRating;
    highlightStars(selectedRating);
}

2、禁用评分功能

在某些情况下，我们可能希望禁用评分功能。例如，当用户已经提交评分后，可以禁用评分功能：

function handleClick(event) {
    if (isRatingDisabled) return;
    selectedRating = event.target.getAttribute('data-value');
    ratingValueElement.textContent = selectedRating;
    highlightStars(selectedRating);
    disableRating();
}
function disableRating() {
    isRatingDisabled = true;
    stars.forEach(star => {
        star.removeEventListener('mouseover', handleMouseOver);
        star.removeEventListener('mouseout', handleMouseOut);
        star.removeEventListener('click', handleClick);
    });
}

3、保存评分结果

可以将评分结果发送到服务器进行保存：

function handleClick(event) {
    selectedRating = event.target.getAttribute('data-value');
    ratingValueElement.textContent = selectedRating;
    highlightStars(selectedRating);
    saveRating(selectedRating);
}
function saveRating(rating) {
    fetch('/save-rating', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ rating: rating })
    })
    .then(response => response.json())
    .then(data => {
        console.log('Rating saved:', data);
    })
    .catch(error => {
        console.error('Error saving rating:', error);
    });
}

通过上述示例，我们可以了解到如何使用HTML、CSS和JavaScript实现一个基本的星级评分系统。这个系统不仅可以用于收集用户反馈，还可以根据实际需求进行扩展和定制。希望这些内容对你有所帮助。