Создать случайную границу в jquery

Question

Я создаю случайное число, и на каждой загрузке страницы изменяется радиус границы моего div:

<script>
$(".card-body").each(function(){
var rand = Math.floor(Math.random() * 100) + 1;
$(this).css( {  borderRadius:  rand } );
});
</script>

Как я могу установить радиус границы, как в этом CSS?

border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;}

Answer 1

Вот как вы можете подойти к этой проблеме, она включает в себя создание массива border-radius значений и последующее объединение их для формирования строкового правила CSS.

1. Создание функции, которая возвращаетслучайное число от 1 до 100:

   function randomPercentage(){
       return Math.floor(Math.random() * 100);
   }
   

2. Для каждой карты получите ее ширину

   $(".card-body").each(function(){
   
       const width = $(this).width();
   
      // ...
   
   });
   

3. Затем создайте новый массивсодержащий два числа ([ 0, 0 ]):

   $(".card-body").each(function(){
   
       const width = $(this).width();
   
       const borderRadiusStyle = [0,0];
   
       // ...
   
   });
   

4. Нам нужно отобразить этот массив несколько раз, чтобы получить массив border-radius значений.Сначала назначьте случайный процент каждому элементу (с помощью функции randomPercentage).Затем присвойте каждому проценту значение, умножив его на ширину объекта (это хорошее справочное значение для нашего border-radius).Другая карта объединит значение со строкой 'px'.Наконец, мы объединим два элемента вместе с пробелом между ними.

   $(".card-body").each(function(){
   
       const width = $(this).width();
   
       const borderRadiusStyle = [0,0];
         .map(value => randomPercentage())
         .map(percentage => width*percentage)
         .map(pixels => pixels + 'px')
         .join(' ');
   
       // ...
   
   });
   

5. Затем можно назначить свойство для объекта:

   $(".card-body").each(function(){
   
       const width = $(this).width();
   
       const borderRadiusStyle = [0,0];
         .map(value => randomPercentage())
         .map(percentage => width*percentage)
         .map(pixels => pixels + 'px')
         .join(' ');
   
       $(this).css( {  borderRadius:  borderRadiusStyle });
   
   });
   

---

Вот полный фрагмент кода:

function randomPercentage(){
	return Math.floor(Math.random() * 100);
}


$(".card-body").each(function(){
	
  const width = $(this).width();

	const borderRadiusStyle = [0,0]
    .map(value => randomPercentage())
    .map(percentage => width*percentage)
		.map(pixels => pixels + 'px')
    .join(' ');
    
	$(this).css( {  borderRadius:  borderRadiusStyle });
  
});

.card-body {
  width: 200px;
  height: 100px;
  background-color: purple;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="card-body"></div>
<div class="card-body"></div>

Answer 2

Используйте код, как показано ниже:

Зациклите 8 раз и добавьте (+=) к rand число, которое выбирается случайным образом каждый раз после 4-го числа, которое я добавил /

$(".card-body").each(function(){
var rand="";
for(var i=0;i<8;i++)
{
 rand += Math.floor(Math.random() * 255) + 1 + "px";
 if(i!=3)
  rand +=" ";
 else
   rand +="/ ";
 }
$(this).css( {  borderRadius:  rand } );
});

.card-body-static{
border:1px solid black;
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
margin-bottom:15px;
}

.card-body{
border:1px solid black;
margin-bottom:15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-body-static">static</div>

<div class="card-body">random</div>
<div class="card-body">random 2</div>