在整个标题中随机放置生成的 div - Javascript Jquery答案

【问题标题】：Randomly position generated divs throughout a header - Javascript Jquery在整个标题中随机放置生成的 div - Javascript Jquery
【发布时间】：2017-02-26 00:58:14
【问题描述】：

我创建了一个标题，我需要在标题中随机放置类似于星星的 div。我已经生成了 50 个这样的“星”，它们是具有星类的跨度标签。 CSS 将星形类变成了某种星形。但是，在我创建了这 50 个跨度之后，我需要在整个标题中随机定位它们。我尝试生成一个随机数并将其分配给星类，但所有跨度恰好都有该边距。我需要使用 margin-top 和 margin-left 的百分比。我尝试将百分比分配给 div 的 margin-top 和 margin-left 但似乎没有任何东西可以随机定位它们。您可以在codepen 上查看演示。我的代码：

<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，需要任何帮助。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我不确定你到底想要什么效果，但我可以解释为什么你的随机性不是“随机的”（即，为什么 CodePen 中的每个元素都有相同的 margin）。

您应该传递刚刚创建的变量star，而不是传递'.star' 作为您的选择器来设置元素边距（选择每个星）：

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

【讨论】：