javascript - Css、html、javascript 中的星形进度条

Question

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

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>

我不知道如何将它组合到可以将其填充到一定百分比的位置，就像我对原始进度条所做的那样。任何帮助将不胜感激。

Answer 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>