Увеличение/уменьшение границы круга CSS в соответствии с номером

Question

Я ищу способ для чего-то, что в конечном итоге кажется достаточно простым ... но я еще не справился!

Идея, которую я имею в номерах (в пролете), находится внутри круга css. Я хочу, чтобы край моего круга изменился в соответствии с номером, который он содержит.

Например: если число в диапазоне от 0 до 10, граница = 2px , если число находится в пределах от 10 до 20 лет, граница = 4px так далее ...

Я ожидаю вашей помощи, спасибо вы!

PS: та же мысль, когда пролет находится за пределами моего Cercle PLZ :)

Answer 1

Вот пример, который может помочь вам:

$(".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"); 
    } 
}); 

HTML

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

css

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

Демо: http://jsfiddle.net/hrbnrkqa/

Answer 2

Вы в состоянии реализовать JavaScript на вашей странице? Если это так, вы, вероятно, лучше всего проверите значение диапазона и соответствующим образом настройте css.

ie. вар valueOfSpan = $ ('# idOfSpan') Val() , если (valueOfSpan> 0 & & valueOfSpan < = 10) $ ('# idOfSpan') CSS ("граница радиуса", "2рх")..;

Answer 3

Вы хотите только эти конкретные шаги или были примерами для общего поведения? Эта скрипка отлично работает для меня последней: https://jsfiddle.net/svArtist/xn7s3700/

$(".borderbycontent").each(function(){ 
 
    $(this).css("border-radius", $(this).html()/5); 
 
});

.borderbycontent{ 
 
    width:30px; 
 
    height:30px; 
 
    background-color:#ddd; 
 
    color:#000; 
 
    border:1px solid #aaa; 
 
    font-weight:bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="borderbycontent"> 
 
    5 
 
</div><div class="borderbycontent"> 
 
    10 
 
</div><div class="borderbycontent"> 
 
    20 
 
</div><div class="borderbycontent"> 
 
    30 
 
</div><div class="borderbycontent"> 
 
    60 
 
</div>

в противном случае просто взять значение и проверить для диапазонов с переключателем/случае, например.

Answer 4

Выберите все элементы, цикл по коллекции и вычислить новое значение радиуса границы:

/** 
 
* Algorithm to calculate new radius 
 
* Number ranges progression: 0:10 - 2, 10:20 - 4, 20:30 - 6, 30:40 - 8, etc. 
 
* Get top boundary of the range and devide by 5. 
 
*/ 
 
[].slice.call(document.querySelectorAll('.smart-border')).forEach(function(span) { 
 
    var number = Number(span.textContent.trim()); 
 
    var newBorder = Math.ceil(number/10) * 10/5; 
 
    span.style.borderRadius = newBorder + 'px'; 
 
});

.smart-border { 
 
    border: 2px #1D9B28 solid; 
 
    height: 50px; 
 
    width: 50px; 
 
    display: inline-block; 
 
    background: #CFBB92; 
 
    line-height: 3; 
 
    text-align: center; 
 
}

<span class="smart-border">5</span> 
 
<span class="smart-border">15</span> 
 
<span class="smart-border">21</span> 
 
<span class="smart-border">36</span>