使用JavaScript实现一个简单的评分组件_javascript UI组件

<div class="rating" id="rating">

  <span data-value="1">★</span>

立即学习“Java免费学习笔记（深入）”；

  <span data-value="2">★</span>

  <span data-value="3">★</span>

  <span data-value="4">★</span>

  <span data-value="5">★</span>

</div>

<span id="rating-value">当前评分：0</span>

.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;

// 更新显示的高亮状态

一键职达

AI全自动批量代投简历软件，自动浏览招聘网站从海量职位中用AI匹配职位并完成投递的全自动操作，真正实现'一键职达'的便捷体验。

79

查看详情

function updateStars(rating) {

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

    if (parseInt(star.dataset.value) <= rating) {

      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}`;

  }

});