<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>五角星评分组件</title><style>body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f5f5f5;}.rating-container {text-align: center;}.stars {font-size: 2rem;color: #ddd; /* 默认灰色 */cursor: pointer;}.star {transition: color 0.2s ease;}.star:hover,.star.active {color: #ffcc00; /* 悬停或激活时变为黄色 */}.score-display {margin-top: 10px;font-size: 1.2rem;color: #333;}</style>
</head>
<body><div class="rating-container"><div class="stars" id="stars"><!-- 初始为空心星星 --></div><div class="score-display" id="score">请选择评分</div></div><script>const starsContainer = document.getElementById('stars');const scoreDisplay = document.getElementById('score');const maxStars = 10;// 初始化星星状态
let currentRating = 0;// 添加点击事件监听器
starsContainer.addEventListener('click', (e) => {if (e.target.classList.contains('star')) {const index = parseInt(e.target.getAttribute('data-index'));updateRating(index + 1);}});// 添加鼠标悬停效果
starsContainer.addEventListener('mouseover', (e) => {if (e.target.classList.contains('star')) {const index = parseInt(e.target.getAttribute('data-index'));highlightStars(index + 1);}});// 移除悬停效果
starsContainer.addEventListener('mouseout', () => {highlightStars(currentRating);});// 更新评分function updateRating(rating) {currentRating = rating;highlightStars(rating);scoreDisplay.textContent = `当前评分：${rating} 星`;}// 高亮星星（实心黄色）function highlightStars(count) {const stars = starsContainer.querySelectorAll('.star');stars.forEach((star, index) => {if (index < count) {star.textContent = '★'; // 实心星星
star.classList.add('active');} else {star.textContent = '☆'; // 空心星星
star.classList.remove('active');}});}// 初始化星星元素（默认为空心）function initStars() {const starsHTML = [];for (let i = 0; i < maxStars; i++) {starsHTML.push(`<span class="star" data-index="${i}">☆</span>`); // 默认空心星星}starsContainer.innerHTML = starsHTML.join('');}// 页面加载完成后初始化
window.onload = () => {initStars();};</script>
</body>
</html>
