隨機位置在整個標題生成div - Javascript jquery

我已經創建了一個標題，我需要隨機定位整個標題類似於明星的div。我已經生成了50個這樣的「星星」，它們是帶有星級標籤的span標籤。 CSS將星級變成了某種明星。但是，在創建了這50個跨度後，我需要將它們隨機放置在我的標題中。我嘗試生成一個隨機數並將其分配給星級，但所有的跨度碰巧都有這個餘量。我需要使用margin-top和margin-left百分比。我曾嘗試將百分比分配給div的margin-top和margin-left，但似乎沒有將它們隨機放置。你可以在codepen上看到演示。我的代碼：隨機位置在整個標題生成div - Javascript jquery

<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(); 

});

我已經環顧四周，爲可能的答案，但沒有直接影響多個div，任何幫助而被通緝。

來源

2017-02-26 Nick DeBaise

我不確定你想要什麼效果，但我可以解釋爲什麼你的隨機性不是「隨機的」（即，爲什麼你的CodePen中的每個元素都有相同的margin）。

不是傳遞'.star'爲您選擇的風格元素的利潤（其中選擇每星），你應該通過您剛纔創建的變量star：

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

來源

2017-02-26 01:09:32 gyre

隨機位置在整個標題生成div - Javascript jquery

回答

相關問題