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时，会为它们分配一组＆＃34; fall-box＆＃34;。

现在，＆＃34;下降框＆＃34; div是黑色的。我希望一些div能够成为＆＃34; the-box green＆＃34;并且＆＃34;坠落红色。＆＃34;我也希望红色div显得不那么频繁。

我在想我应该将所有这些放在一个数组（或原型？）中，但我不确定应该怎么做。我只编写了7周，我正在努力学习！

Answer 1

请按照以下代码进行操作。

css：

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

在上面的课程中请删除背景颜色。

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

在上面的功能中，我所做的是：

创建了一个数组。
然后从数组的起始0到长度获取随机数，然后将该数字舍入为整数。如果我们不使用 Math.round（）函数，则随机数将为喜欢：0.1486262298191667所以使用Math.round或其他数学函数会更好。
在上面的功能中，我使用了一些静态宽度和高度，所以如果需要请删除。
最后

$（＆＃34; .falling盒＆＃34）。CSS（＆＃34;背景＆＃34;，temp_color）;

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

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

1 个答案: