当前位置：首页 > JavaScript

js实现收藏星星

2026-04-07 08:51:02JavaScript

实现收藏星星功能

在JavaScript中实现收藏星星功能通常涉及创建一个可点击的星星图标，点击后切换状态（收藏/取消收藏）。以下是实现方法：

HTML结构

创建一个简单的HTML元素作为星星图标：

<div id="star" class="star">☆</div>

CSS样式

为星星添加基本样式和交互效果：

js实现收藏星星

.star {
  font-size: 24px;
  cursor: pointer;
  user-select: none;
}

.star.filled {
  color: gold;
}

JavaScript实现

使用事件监听器切换星星状态：

const star = document.getElementById('star');

star.addEventListener('click', function() {
  this.classList.toggle('filled');
  this.textContent = this.classList.contains('filled') ? '★' : '☆';

  // 获取当前状态
  const isFavorited = this.classList.contains('filled');
  console.log(isFavorited ? '已收藏' : '未收藏');
});

持久化存储

如果需要记住用户的收藏状态，可以使用localStorage：

js实现收藏星星

// 初始化时检查存储状态
if(localStorage.getItem('favorited') === 'true') {
  star.classList.add('filled');
  star.textContent = '★';
}

star.addEventListener('click', function() {
  this.classList.toggle('filled');
  const isFavorited = this.classList.contains('filled');
  this.textContent = isFavorited ? '★' : '☆';

  // 存储状态
  localStorage.setItem('favorited', isFavorited);
});

动画效果

为点击添加动画效果：

.star {
  transition: transform 0.2s;
}

.star:active {
  transform: scale(1.5);
}

完整示例

整合所有代码的完整实现：

<!DOCTYPE html>
<html>
<head>
  <style>
    .star {
      font-size: 24px;
      cursor: pointer;
      user-select: none;
      transition: transform 0.2s;
    }
    .star.filled {
      color: gold;
    }
    .star:active {
      transform: scale(1.5);
    }
  </style>
</head>
<body>
  <div id="star" class="star">☆</div>

  <script>
    const star = document.getElementById('star');

    // 初始化
    if(localStorage.getItem('favorited') === 'true') {
      star.classList.add('filled');
      star.textContent = '★';
    }

    star.addEventListener('click', function() {
      this.classList.toggle('filled');
      const isFavorited = this.classList.contains('filled');
      this.textContent = isFavorited ? '★' : '☆';
      localStorage.setItem('favorited', isFavorited);
    });
  </script>
</body>
</html>

这种方法创建了一个简单但功能完整的收藏星星交互，包含视觉反馈和状态持久化功能。可以根据需求进一步扩展，如添加AJAX请求与服务器同步收藏状态。