Css、html、javascript 中的星形进度条答案

【问题标题】：Star Shaped Progress Bars in Css, html, javascriptCss、html、javascript 中的星形进度条
【发布时间】：2022-02-15 03:27:10
【问题描述】：

所以我有一个进度条，我一直在我的网站上使用它。代码如下：

CSS：

#ProgressBar {
position: relative;
width: 100%;
height: 10px;
background-color: #ddd;
border-radius: 25px; 
font-size:18px;
}
#Progress {
position: absolute;
height: 100%;
background-color: #4CAF50;
border-radius: 25px; 
}

HTML：

<div Id="ProgressBar">
<div Id="Progress" style="width: <?php echo $Variable; ?>%;"></div>.
</br>
</div>

样式中的 PHP 从我的 SQL 数据库中拉下一个数字，并显示进度条已填充了多少百分比。

我想制作进度条，但我想用星星代替进度条。有点像评分系统。我尝试采用这样的简单评分系统：

CSS：

.star span:before {
content: "\2605";
position: absolute;
width: 40%;
background-color:#339966;
}

HTML：

<div class="star">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span>.<span>☆</span>
</div>

我不知道如何将它组合起来，我可以像使用原始进度条一样将其填充到一定百分比。任何帮助将不胜感激。

【问题讨论】：

标签： javascript php jquery html css

【解决方案1】：

您可以将重复星星的背景设置为#inner div。然后在这个 div 上放置另一个白色背景的 div 以隐藏一部分星星背景。

用你的 PHP 代码给 #overlay div 一个宽度。

请注意，如果您想显示 40% 完成的进度，则必须为 #overlay div 提供 60% 的宽度，因为它位于正确的位置。

#outer {
  position: absolute;
  width: 250px;
  height: 16px;
  border: 1px solid #d8d8d8;
}

#inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/2e/Star.png');
  background-repeat: repeat;  
  z-index: 5;
}

#overlay {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
  <div id="overlay" style="width:60%"></div>
  <div id="inner"></div>
</div>

【讨论】：

离我要去的地方更近了，我可以试试这个想法，但我想让星星填满整个进度条。所以喜欢。因此，例如，如果我在整个进度条中有 10 次开始，而 50% 将被填充，则 5 次开始将被填充。
能不能把背景png中的星星做成透明的，然后改变它后面的彩色div的宽度？
@adamdport 采纳了您的想法并稍加调整，得到了我想要的。我使星星透明，但星星的背景与我的页面颜色相同，因此当我在它后面有颜色 div 时，颜色不会从星星后面的外部显示出来。谢谢！

【解决方案2】：

您可以使用三个 Div。外部 Div 的宽度为 106PX。中间的 Div 会将背景设置为白色，或者您的背景颜色是什么，宽度设置为您想要的任何 %，并将溢出设置为隐藏。第三个内部 div 的宽度将设置为 120px。我为星星使用了 Font Awesome Icons。如果更改图标的大小，则必须调整外部 Div 的宽度 .star-container 和内部 Div 的宽度 .stair

.star-container {
  width: 106px;
}

.star-icons {
  background: #fff;
  width: 90%;
  overflow: hidden;
}

.star {
  width: 120px;
}

<!-- Font-Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />

<!-- Stars -->
<div class="star-container">
    <div class="star-icons">
      <div class="star">
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
      </div>
    </div>
  </div>

【讨论】：