星级评分系统是前端开发中常见的交互组件，核心是通过鼠标事件控制星星的显示状态，实现悬停预览、点击确认评分的效果。下面我们一步步实现这个功能。
一、基础页面结构搭建
首先我们需要创建评分区域的HTML结构，包含5颗星星的容器和显示当前评分的文本区域，注意这里的<span>标签是普通的HTML元素，不是函数调用。
<div class="star-rating"> <span class="star" data-value="1">☆</span> <span class="star" data-value="2">☆</span> <span class="star" data-value="3">☆</span> <span class="star" data-value="4">☆</span> <span class="star" data-value="5">☆</span> <p class="rating-text">当前评分：0</p> </div>
二、基础样式设计
接下来给星星和容器添加基础样式，默认星星为空心，高亮状态为实心，同时设置鼠标悬停时的指针样式。
.star-rating {
font-size: 24px;
color: #ccc;
cursor: pointer;
}
.star {
margin-right: 5px;
transition: color 0.2s;
}
.star.active {
color: #ffc107;
}
.rating-text {
margin-top: 10px;
font-size: 16px;
}
三、核心交互逻辑实现
交互逻辑主要分为三个部分：鼠标悬停时高亮对应星星、鼠标离开时恢复之前选中的状态、点击时固定当前评分。我们需要用到mouseover、mouseout、click三个事件监听。
1. 获取DOM元素
首先获取所有的星星元素和显示评分的文本元素，同时定义变量存储当前选中的评分值。
// 获取所有星星元素
const stars = document.querySelectorAll('.star');
// 获取显示评分的文本元素
const ratingText = document.querySelector('.rating-text');
// 存储当前选中的评分，初始为0
let currentRating = 0;
2. 实现悬停高亮效果
当鼠标移动到某颗星星上时，将该星星及其之前的所有星星都添加高亮类名，离开时如果当前没有选中评分，则移除所有高亮。
// 遍历所有星星绑定鼠标悬停事件
stars.forEach(star => {
// 鼠标移入事件
star.addEventListener('mouseover', function() {
const value = parseInt(this.dataset.value);
// 高亮当前星星及之前的所有星星
stars.forEach(s => {
if (parseInt(s.dataset.value) <= value) {
s.classList.add('active');
} else {
s.classList.remove('active');
}
});
});
// 鼠标移出事件
star.addEventListener('mouseout', function() {
// 如果没有选中的评分，移除所有高亮
if (currentRating === 0) {
stars.forEach(s => s.classList.remove('active'));
} else {
// 否则高亮选中的评分对应的星星
stars.forEach(s => {
if (parseInt(s.dataset.value) <= currentRating) {
s.classList.add('active');
} else {
s.classList.remove('active');
}
});
}
});
});
3. 实现点击固定评分
点击星星时，将当前点击的星星对应的值存储为选中评分，更新显示的文本内容，同时高亮对应的星星。
// 遍历所有星星绑定点击事件
stars.forEach(star => {
star.addEventListener('click', function() {
// 获取点击的星星对应的分值
currentRating = parseInt(this.dataset.value);
// 更新显示的评分文本
ratingText.textContent = `当前评分：${currentRating}`;
// 高亮选中的星星及之前的所有星星
stars.forEach(s => {
if (parseInt(s.dataset.value) <= currentRating) {
s.classList.add('active');
} else {
s.classList.remove('active');
}
});
});
});
四、扩展功能：支持取消评分
如果需要支持再次点击已选中的星星取消评分，可以在点击事件中增加判断逻辑，当点击的分值等于当前选中评分时，将评分重置为0。
stars.forEach(star => {
star.addEventListener('click', function() {
const clickValue = parseInt(this.dataset.value);
// 如果点击的分值等于当前选中评分，取消评分
if (clickValue === currentRating) {
currentRating = 0;
ratingText.textContent = '当前评分：0';
stars.forEach(s => s.classList.remove('active'));
} else {
currentRating = clickValue;
ratingText.textContent = `当前评分：${currentRating}`;
stars.forEach(s => {
if (parseInt(s.dataset.value) <= currentRating) {
s.classList.add('active');
} else {
s.classList.remove('active');
}
});
}
});
});
五、完整代码整合
将上面的HTML、CSS、JS代码整合后，就可以直接运行看到完整的星级评分效果，你可以根据实际需求调整星星的数量、样式和交互逻辑。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>js星级评分系统</title>
<style>
.star-rating {
font-size: 24px;
color: #ccc;
cursor: pointer;
}
.star {
margin-right: 5px;
transition: color 0.2s;
}
.star.active {
color: #ffc107;
}
.rating-text {
margin-top: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="star-rating">
<span class="star" data-value="1">☆</span>
<span class="star" data-value="2">☆</span>
<span class="star" data-value="3">☆</span>
<span class="star" data-value="4">☆</span>
<span class="star" data-value="5">☆</span>
<p class="rating-text">当前评分：0</p>
</div>
<script>
const stars = document.querySelectorAll('.star');
const ratingText = document.querySelector('.rating-text');
let currentRating = 0;
stars.forEach(star => {
star.addEventListener('mouseover', function() {
const value = parseInt(this.dataset.value);
stars.forEach(s => {
if (parseInt(s.dataset.value) <= value) {
s.classList.add('active');
} else {
s.classList.remove('active');
}
});
});
star.addEventListener('mouseout', function() {
if (currentRating === 0) {
stars.forEach(s => s.classList.remove('active'));
} else {
stars.forEach(s => {
if (parseInt(s.dataset.value) <= currentRating) {
s.classList.add('active');
} else {
s.classList.remove('active');
}
});
}
});
star.addEventListener('click', function() {
const clickValue = parseInt(this.dataset.value);
if (clickValue === currentRating) {
currentRating = 0;
ratingText.textContent = '当前评分：0';
stars.forEach(s => s.classList.remove('active'));
} else {
currentRating = clickValue;
ratingText.textContent = `当前评分：${currentRating}`;
stars.forEach(s => {
if (parseInt(s.dataset.value) <= currentRating) {
s.classList.add('active');
} else {
s.classList.remove('active');
}
});
}
});
});
</script>
</body>
</html>