随机位置在整个标题生成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

回答

相关问题