★

  ★

  ★

  ★

  ★

当前评分：0

.rating {

  font-size: 30px;

  color: #ddd;

  user-select: none;

}

.rating span {

  cursor: pointer;

  transition: color 0.2s;

}

.rating span:hover,

.rating span.active {

  color: orange;

}

const ratingEl = document.getElementById('rating');

const valueDisplay = document.getElementById('rating-value');

let currentRating = 0;

// 更新显示的高亮状态

mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提

function updateStars(rating) {

  Array.from(ratingEl.children).forEach(star => {

    if (parseInt(star.dataset.value)

      star.classList.add('active');

    } else {

      star.classList.remove('active');

    }

  });

}

// 鼠标悬停效果

ratingEl.addEventListener('mouseover', function(e) {

  if (e.target.tagName === 'SPAN') {

    updateStars(parseInt(e.target.dataset.value));

  }

});

// 鼠标离开时恢复到当前评分

ratingEl.addEventListener('mouseout', function() {

  updateStars(currentRating);

});

// 点击设置评分

ratingEl.addEventListener('click', function(e) {

  if (e.target.tagName === 'SPAN') {

    currentRating = parseInt(e.target.dataset.value);

    valueDisplay.textContent = `当前评分：${currentRating}`;

  }

});