我正在编写一个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>
2条答案
按热度按时间ecbunoof1#
我刚刚修改的代码和使用2进度条-1的百分比值和其他没有百分比。progressbar的代码可以与我想要展示的如何处理这两个值相同
yacmzcpb2#
因此,您希望div元素包含
95%
而不是9.5
?然后,首先需要将百分比转换为0到10的“范围”-在这种情况下,这当然非常简单,您将95除以10 -在您首先使用
parseInt
之后,只得到95作为95%
的数值。第二件重要的事情是CSS变量的 type。它需要是一个字符串值-只要您从输入字段中读取值,它就是一个。但是现在我们做了一些数学运算,它是一个浮点值,需要再次转换为字符串值-我们可以f.e.使用旧的
"" + ...
技巧。(我引入了第二个变量
displayVal
,它将保留div中的原始95%
文本,因为这是您希望在圆圈内显示的内容。