js 实现星星打分
实现星星打分功能
使用HTML、CSS和JavaScript可以创建一个交互式的星星打分系统。以下是一个完整的实现方法：
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>
</div>
<p>当前评分: <span id="rating-value">0</span> 星</p>CSS样式
.star-rating {
font-size: 24px;
cursor: pointer;
}
.star {
color: #ccc;
transition: color 0.2s;
}
.star.hover {
color: #ffcc00;
}
.star.active {
color: #ffcc00;
}JavaScript逻辑
const stars = document.querySelectorAll('.star');
const ratingValue = document.getElementById('rating-value');
let currentRating = 0;
stars.forEach(star => {
star.addEventListener('mouseover', () => {
const value = parseInt(star.getAttribute('data-value'));
highlightStars(value);
});
star.addEventListener('mouseout', () => {
highlightStars(currentRating);
});
star.addEventListener('click', () => {
currentRating = parseInt(star.getAttribute('data-value'));
ratingValue.textContent = currentRating;
highlightStars(currentRating);
});
});
function highlightStars(value) {
stars.forEach(star => {
star.classList.remove('hover', 'active');
if (parseInt(star.getAttribute('data-value')) <= value) {
star.classList.add('hover');
}
if (parseInt(star.getAttribute('data-value')) <= currentRating) {
star.classList.add('active');
}
});
}实现细节说明
星星打分系统通过CSS类来控制星星的显示状态。未选中时显示灰色，悬停或选中时显示黄色。
事件处理包括鼠标悬停、离开和点击三种交互方式。鼠标悬停时临时高亮显示星星数量，离开时恢复实际评分状态，点击后锁定评分。
评分值存储在currentRating变量中，并实时显示在页面上。这种方法提供了良好的视觉反馈，用户可以直观地看到自己的选择。
扩展功能
要实现半星评分，可以使用两个并排的半星字符：
<span class="star" data-value="0.5">½</span>
<span class="star" data-value="1">★</span>增加动画效果可以通过CSS实现：
.star {
transform: scale(1);
transition: all 0.2s;
}
.star:hover {
transform: scale(1.2);
}这个实现方案简洁高效，适合大多数网站需求，可以根据具体项目调整样式和交互细节。
