我创建了一个标题,我需要随机定位整个标题中类似星星的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,需要任何帮助。
答案 0 :(得分:0)
我不确定你想要什么效果,但我可以解释为什么你的随机性不是“随机的”(即为什么每个元素在你的CodePen中都有相同的margin
)。
您应该传递刚刚创建的变量'.star'
,而不是将star
作为选择器来设置元素边距(选择每个星形)的样式,而不是/ p>
$(star).css({
"margin-top": string,
"margin-left": stringtwo
});