js评分小半心怎么做

要制作一个JS评分小半心，需要使用HTML、CSS和JavaScript。 在评分系统中，半颗心可以通过CSS的渐变背景或通过SVG图像来实现。 使用CSS的方法通常更简单并且易于调整样式。下面我们将详细讲解如何通过这两种方式实现评分小半心。

一、使用HTML和CSS实现评分小半心

1. 准备HTML结构

首先，我们需要设置一个基本的HTML结构来表示评分系统。我们使用<div>标签来创建心形图标，并使用data-rating属性来存储评分值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rating System</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="rating" data-rating="3.5">
    <div class="heart"></div>
    <div class="heart"></div>
    <div class="heart"></div>
    <div class="heart"></div>
    <div class="heart"></div>
  </div>
  <script src="scripts.js"></script>
</body>
</html>

2. 编写CSS样式

接下来，我们编写CSS样式来定义心形图标的外观，并通过伪元素来实现半颗心的效果。

/* styles.css */
.rating {
  display: inline-block;
  direction: rtl;
}
.heart {
  width: 24px;
  height: 24px;
  display: inline-block;
  background: linear-gradient(to right, red 50%, gray 50%);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 50% 76%, 18% 100%, 0% 38%);
  margin: 0 2px;
  position: relative;
}
.heart::before,
.heart::after {
  content: '';
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 0;
  background: inherit;
  clip-path: inherit;
}
.heart::after {
  background: gray;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 50% 76%, 18% 100%, 0% 38%);
  z-index: 1;
}
.heart.half::after {
  width: 12px;
  clip-path: polygon(0 0, 50% 0%, 50% 100%, 0% 100%);
}

3. 编写JavaScript代码

最后，我们编写JavaScript代码来根据data-rating属性设置评分值，并显示半颗心。

// scripts.js
document.addEventListener("DOMContentLoaded", function() {
  const ratingElement = document.querySelector('.rating');
  const ratingValue = parseFloat(ratingElement.getAttribute('data-rating'));
  const hearts = ratingElement.children;
  for (let i = 0; i < hearts.length; i++) {
    if (i < Math.floor(ratingValue)) {
      hearts[i].classList.add('full');
    } else if (i < Math.ceil(ratingValue)) {
      hearts[i].classList.add('half');
    }
  }
});

二、使用SVG图像实现评分小半心

1. 准备HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Rating System</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="rating" data-rating="3.5">
    <svg class="heart" viewBox="0 0 24 24">
      <polygon points="12,0 15,7 24,7 18,12 20,20 12,15 4,20 6,12 0,7 9,7" />
    </svg>
    <svg class="heart" viewBox="0 0 24 24">
      <polygon points="12,0 15,7 24,7 18,12 20,20 12,15 4,20 6,12 0,7 9,7" />
    </svg>
    <svg class="heart" viewBox="0 0 24 24">
      <polygon points="12,0 15,7 24,7 18,12 20,20 12,15 4,20 6,12 0,7 9,7" />
    </svg>
    <svg class="heart" viewBox="0 0 24 24">
      <polygon points="12,0 15,7 24,7 18,12 20,20 12,15 4,20 6,12 0,7 9,7" />
    </svg>
    <svg class="heart" viewBox="0 0 24 24">
      <polygon points="12,0 15,7 24,7 18,12 20,20 12,15 4,20 6,12 0,7 9,7" />
    </svg>
  </div>
  <script src="scripts.js"></script>
</body>
</html>

2. 编写CSS样式

/* styles.css */
.rating {
  display: flex;
  direction: rtl;
}
.heart {
  width: 24px;
  height: 24px;
  fill: gray;
  margin: 0 2px;
}
.heart.full {
  fill: red;
}
.heart.half {
  fill: url(#halfGradient);
}
.svg-container {
  position: relative;
}
.svg-container svg {
  position: absolute;
  top: 0;
  left: 0;
}

3. 编写JavaScript代码

// scripts.js
document.addEventListener("DOMContentLoaded", function() {
  const ratingElement = document.querySelector('.rating');
  const ratingValue = parseFloat(ratingElement.getAttribute('data-rating'));
  const hearts = ratingElement.children;
  for (let i = 0; i < hearts.length; i++) {
    if (i < Math.floor(ratingValue)) {
      hearts[i].classList.add('full');
    } else if (i < Math.ceil(ratingValue)) {
      hearts[i].classList.add('half');
    }
  }
});

以上是实现JS评分小半心的两种方法。使用HTML和CSS的方式更适合简单的项目，而使用SVG的方式则提供了更高的灵活性和可扩展性。 选择哪种方式取决于你的项目需求和个人偏好。

js评分小半心怎么做

一、使用HTML和CSS实现评分小半心

1. 准备HTML结构

2. 编写CSS样式

3. 编写JavaScript代码

二、使用SVG图像实现评分小半心

1. 准备HTML结构

2. 编写CSS样式

3. 编写JavaScript代码

相关问答FAQs：