Javascript CSS圆形边框根据其包含的数字增加/减少

我在寻找一种最终看起来足够简单的方法。。。但我还没有成功

我的想法是，数字（跨度）位于圆圈css内。我希望我的圆的边根据它包含的数字而改变

例如：如果数字介于0和10之间，则边框=2px 如果数字介于10和20之间，则边框=4px 等等

我期待你的帮助，谢谢

---

PS：当跨度超出我的cercle范围时，也有同样的想法：）

这里有一个例子可以帮助您：

$(".s").each(function() {
   var text = parseInt($(this).text());
    if ( text > 0 && text <= 10 ) {
        $(this).addClass("border-2");
    } else if ( text > 10 && text <= 20 ) {
        $(this).addClass("border-4");
    }
});

---

演示：

您能够在页面上实现JavaScript吗？如果是这样的话，最好检查跨度的值并相应地调整css

即。 var valueOfSpan=$（'idOfSpan'）.val（）

---

如果（valueOfSpan>0&&valueOfSpan您只想要那些特定的步骤，还是它们是一般行为的示例？ 对于后者，这把小提琴对我来说很好：

$（“.borderbycontent”）.each（函数（）{
$（this.css（“边界半径”，$（this.html（）/5）；
})；

.borderbycontent{
宽度：30px；
高度：30px；
背景色：#ddd；
颜色：#000；
边框：1px实心#aaa；
字体大小：粗体；
}

5.
10
20
30
60

选择所有元素，循环收集并计算新的边界半径值：

/**
*计算新半径的算法
*数字范围：0:10-2、10:20-4、20:30-6、30:40-8等。
*获取范围的顶部边界，并按5进行偏差。
*/
[].slice.call（document.querySelectorAll（'.smart border'））.forEach（函数（span）{
var number=number（span.textContent.trim（））；
var NewOrder=数学单元（数字/10）*10/5；
span.style.borderRadius=新订单+px'；
})；

。智能边框{
边框：2px#1D9B28实心；
高度：50px；
宽度：50px；
显示：内联块；
背景#CFBB92；
线高：3；
文本对齐：居中；
}

5
15
21
36

能否添加相关的HTML/CSS/JS？如果值为9？@RadonirinaMaminiaina，则此精确设置的半径为1.8（取决于浏览器功能，此设置与2px之间可能有差异，也可能没有差异）…根据行为的实际情况，可能需要检查具体的范围，正如我和其他人指出的那样，因此您应该舍入值。当然，这是一种安全的方法（如果这是正确的方向，我认为这里可能需要在某些范围之间有一个固定的值。当然，这也可能是使用舍入或地板，然后进行乘法实现的）非常有趣，谢谢！另一方面，我有其他圆圈，里面有img，圆圈下面有数字，如果我想让圆圈根据下面的数字增减？有一种方法吗？你可以根据自己的喜好修改代码！：）即使css变体不在跨度上，而是在其他元素Math.ceil上，也不难（数字/10）*10/5；？写数学不是更整洁吗？ceil（数字/10）*2；？@BenPhilipp我把它放在这里是为了让公式清楚地知道半径是如何计算的。但它当然可以简化。谢谢nick，但似乎不起作用，请拨弄一下？var valueOfSpan=$（'.circle'）.val（）；if（valueOfSpan>0&&valueOfSpan

<span class="s">9</span>
<span class="s">5</span>
<span class="s">15</span>

.s {
    display: block;
    background: red;
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}
.border-2 {
    border-radius: 2px;
}
.border-4 {
    border-radius: 4px;
}