jquery 基于百分比的循环进度条

4szc88ey  于 2023-08-04  发布在  jQuery
关注(0)|答案(2)|浏览(102)

我正在编写一个js代码,其中循环进度条基于评级显示。但有个问题现在进度条的总值为10。所以我可以在这里输入max 10。如果我输入9%,它就不能工作,因为max-value是10。但是我想要这样的东西,如果我输入任何带有百分比的数字,比如70%85%35%,那么value / max值将作为100。我该怎么做?
当我输入任何低于10且不含百分比的数字时,它看起来像这样:x1c 0d1x
当输入百分比时:


我想要的是,如果数字是任何百分比,圆圈或进度条将被视为100最大值。如果数字后面没有任何百分比,它将作为10最大值工作。
下面是我的代码:

$(document).ready(function() {
      let val = $(".ratings").html();
      const progressBar = $('[role="progressbar"]');
      progressBar.attr('aria-valuenow', val); // Set the value to aria-valuenow attribute
      progressBar.css('--value', val); // Set the value to --value CSS custom property
      progressBar.text(val);
    });
div[role="progressbar"] {
      --size: 3rem;
      --fg: #369;
      --bg: #def;
      --pgValue: var(--value);
      --pgPercentage: calc(var(--pgValue) * 10);
      width: var(--size);
      height: var(--size);
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: 
        radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
      font-size: calc(var(--size) / 3.5);
      color: var(--fg);
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ratings" style="display: none;">9.5</div>
    <div role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="10" style="--value:"></div>
ecbunoof

ecbunoof1#

我刚刚修改的代码和使用2进度条-1的百分比值和其他没有百分比。progressbar的代码可以与我想要展示的如何处理这两个值相同

$(document).ready(function() {
      let val_str = val = $(".ratings1").html();
      if(val.includes('%')) {
          val = val.replace(/%\s*$/, "");
          val = "" + (parseInt(val) / 10);
      }
          
      const progressBar = $('[class="progressbar1"]');
      progressBar.attr('aria-valuenow', val); // Set the value to aria-valuenow attribute
      progressBar.css('--value', val); // Set the value to --value CSS custom property
      progressBar.text(val_str);
      
      
      let val_str2 = val2 = $(".ratings2").html();
      if(val2.includes('%')) {
          val2 = val2.replace(/%\s*$/, "");
          val2 = "" + (parseInt(val2) / 10);
      }
          
      const progressBar2 = $('[class="progressbar2"]');
      progressBar2.attr('aria-valuenow', val2); // Set the value to aria-valuenow attribute
      progressBar2.css('--value', val2); // Set the value to --value CSS custom property
      progressBar2.text(val_str2);
    });
div[role="progressbar"] {
      --size: 3rem;
      --fg: #369;
      --bg: #def;
      --pgValue: var(--value);
      --pgPercentage: calc(var(--pgValue) * 10);
      width: var(--size);
      height: var(--size);
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: 
        radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
      font-size: calc(var(--size) / 3.5);
      color: var(--fg);
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ratings1" style="display: none;">9.5</div>
    <div class="progressbar1" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="10" style="--value:"></div>
    
<br/><br/>
<div class="ratings2" style="display: none;">95%</div>
    <div class="progressbar2" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="10" style="--value:"></div>
yacmzcpb

yacmzcpb2#

因此,您希望div元素包含95%而不是9.5
然后,首先需要将百分比转换为0到10的“范围”-在这种情况下,这当然非常简单,您将95除以10 -在您首先使用parseInt之后,只得到95作为95%的数值。
第二件重要的事情是CSS变量的 type。它需要是一个字符串值-只要您从输入字段中读取值,它就是一个。但是现在我们做了一些数学运算,它是一个浮点值,需要再次转换为字符串值-我们可以f.e.使用旧的"" + ...技巧。
(我引入了第二个变量displayVal,它将保留div中的原始95%文本,因为这是您希望在圆圈内显示的内容。

$(document).ready(function() {
      let displayVal = $(".ratings").html(),
          val = "" + (parseInt(displayVal) / 10);
      const progressBar = $('[role="progressbar"]');
      progressBar.attr('aria-valuenow', val); // Set the value to aria-valuenow attribute
      progressBar.css('--value', val); // Set the value to --value CSS custom property
      progressBar.text(displayVal);
    });
div[role="progressbar"] {
      --size: 3rem;
      --fg: #369;
      --bg: #def;
      --pgValue: var(--value);
      --pgPercentage: calc(var(--pgValue) * 10);
      width: var(--size);
      height: var(--size);
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: 
        radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
      font-size: calc(var(--size) / 3.5);
      color: var(--fg);
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ratings" style="display: none;">95%</div>
    <div role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="10" style="--value:"></div>

相关问题