Question

我曾试图对此进行搜索，但我不确定如何根据进度条值对确定的宽度值进行编码。

进度条码示例

<div id="raffle_wise_ticket_bar" title="Sold 139 out of 1399">
  <div class="zero">0</div>
  <div class="progress" style="width: (This is what I need to calculate);">
    <div class="arrow_up" style="border-bottom-color: #ffffff;"></div>
    <div class="purchased" style="color: #ffffff; background-color: #000000a3;">139 sold</div>
  </div>
  <div class="full">1399</div>
</div>

我有 php 代码，它给出了销售量、最小量、全量，并且只是寻找可以获取这些值并计算行中宽度的东西。

谢谢

Answer 1

您可以使用 CSS calc：

width: calc(var(--amount-sold) / var(--full-amount) * 100%)

只需将 var(--amount-sold) 替换为已售数量，将 var(--full-amount) 替换为全额。需要 * 100% 才能将其转换为百分比。

Demo（使用 CSS 变量进行演示）：

:root{
 --full-amount: 20;
 --amount-sold:10;
}

<div id="raffle_wise_ticket_bar" title="Sold 139 out of 1399">
  <div class="zero">0</div>
  <div class="progress" style="width: calc(var(--amount-sold) / var(--full-amount) * 100%)">
      <div class="arrow_up" style="border-bottom-color: #ffffff;"></div>
      <div class="purchased" style="color: #ffffff; background-color: #000000a3;">139 sold</div>
    </div>
    <div class="full">1399</div>
  </div>

从值计算进度条宽度

1 个答案: