ランダムに生成されたdivをヘッダ全体に配置する - Javascript Jquery

Question

ヘッダを作成しました。ヘッダー全体に星に似たdivをランダムに配置する必要があります。私はスターのクラスでスパンタグであるこれらの「スター」50個を生成しました。 CSSはスタークラスを幾分スターに変えます。しかし、私はこれらの50スパンを作成した後、私はヘッダー全体に無作為に配置する必要があります。私は乱数を生成して星のクラスに割り当てようとしましたが、すべてのスパンがそのマージンを持つようになりました。私はマージン - 上とマージン - 左をパーセンテージで使用する必要があります。私はdivのmargin-topとmargin-leftにパーセントを割り当てることを試みましたが、何もそれらをランダムに配置するようには見えませんでした。デモはcodepenにあります。私のコード：私は可能な答えはなく、直接、複数のdivに影響なしのために周りを見回している

<div class="header" id="head"> 
<div class="starholder" id="holdstar"> 

</div> 
<div class="top_nav"> 
    <i class="fa fa-bars"></i> 
</div> 
<div class="text text-center"> 
    <p id="name">Nick <span id="lastname">D</span</p> 
</div> 
    <div class="mtn1"> 
    </div> 
    <div class="mtn2"> 
    </div> 
    <div class="mtn3"> 
    </div> 

$(document).ready(function() { 
//Name hinge 
$("#name").click(function() { 
    $(".text").addClass("bounce"); 
    setTimeout(function() { 
      $(".text").removeClass("bounce"); 
    }, 3000); 
}); 


// create stars and place them at random 
function createStar() { 

    var holder = document.getElementById("holdstar"); 

    for (var i = 0; i < 50; i++) { 
      var percent = Math.floor((Math.random() * 100) + 1); 
    var string = percent + "%" 

    var percenttwo = Math.floor((Math.random() * 100) + 1); 
     var stringtwo = percenttwo + "%"; 

     var star = document.createElement("span"); 
     star.className = "star"; 

$(".star").css({ 
    "margin-top": string, 
    "margin-left": stringtwo 
}); 
     document.getElementById("holdstar").appendChild(star); 
    } 
}; 


createStar(); 

}); 

は、任意のヘルプが望まれます。

Answer 1

あなたは、あなたのランダム性が「ランダム」でない（つまり、すべての要素がCodePenに同じmarginを持つ理由）理由を説明することができます。代わりに、（すべての星を選択）要素のマージンのスタイルをあなたのセレクタとして'.star'を渡すの

、あなたが作成した変数starを渡しする必要があります。

$(star).css({ 
    "margin-top": string, 
    "margin-left": stringtwo 
});