javascript - 如何将一个类随机分配给我在 DOM 中生成的元素？

Question

https://jsfiddle.net/j4qcsksy/

function random(min,max){
    return Math.round(Math.random() * (max-min) + min);
}

function dropDiv(){
    var length = random(0, 54) * 22.5;
    var velocity = 3000;
    var size = 1.5;

    var thisBox = $("<div/>", {
        class: "falling-box",
        style: `width:${size}%; height:0%;padding-bottom:${size}%; 
        left:${length}px; transition: transform ${velocity}ms linear`,

});


//insert box element
$(".container").append(thisBox);


//random start for animation
setTimeout(function(){
    thisBox.addClass("move");
}, 40 );

//remove this object when animation is over
thisBox.one("webkitTransitionEnd otransitionend oTransitionEnd 
msTransitionEnd transitionend",
          function(event) {
$(this).remove();
});

}
//falling divs
setInterval(function(){

       dropDiv();

}, 1000);

我制作了一个脚本，其中我沿着 div 容器的宽度随机生成一堆 div。当生成这些 div 时，它们会被分配到“falling-box”类。

现在，“falling-box”div 是黑色的。我希望某些 div 具有“落盒绿色”和“落盒红色”类。我还希望红色 div 出现的频率降低。

我在想我应该把所有这些都放在一个数组(或原型(prototype)？)中，但我不确定我应该怎么做。我只写了 7 周的代码，我正在尽我最大的努力学习!

Answer 1

请遵循以下代码。

CSS:

.falling-box{
    position:absolute;
    top: -150px;
    transition: transform 1.5s linear;
    z-index:100;
}

在上面的类(class)中，请删除背景颜色。

Javascript:

function dropDiv(){
  var color_array = ["black","red","green","yellow"];
  var temp_color = color_array[Math.round(Math.random(0,color_array.length + 1))];
  var length = random(0, 54) * 22.5;
  var velocity = 3000;
  var size = 1.5;
//   var size = 20; ---->og px 
  var thisBox = $("<div/>", {
    class: "falling-box",
    style: 'width:1.5%;height:20%;padding-bottom:${size}%; left:${length}px; transition: transform ${velocity}ms linear',
    // style: `width:${size}px; height:${size}px; left:${length}px; transition: transform ${velocity}ms linear`
  });


  //insert box element
  $(".container").append(thisBox);
  $(".falling-box").css("background",temp_color);

在上面的函数中我所做的是:

1. 创建了一个数组。

2. 然后获取从 0 开始到数组长度的随机数，然后将该数字四舍五入为整数。如果我们不使用 Math.round() 函数，那么随机数将是像:0.1486262298191667 所以最好使用 Math.round 或其他数学函数。

3. 在上面的函数中我使用了一些静态的宽度和高度所以如果你需要请删除。

4. 最后

   $(".falling-box").css("背景",temp_color);

使用上面的代码我应用了背景颜色。