将许多div的颜色从绿色设置为红色

Question

在我的项目中,可能有任意数量的div,如千,二千,一百万等.我希望他们的背景颜色从绿色变为红色.所以他们都有不同的颜色.第一个div将是"真正的"绿色,最后一个div将是"真正的"红色.

这就是我所拥有的.正如你所看到的那样,最后有一些没有背景颜色的div.我宁愿用rgb来解决这个问题.

$(function(){
  var r = 20;
  var g = 200;
  var b = 10;
  for(var i = 0; i < 300; i++){
    $("body").append("<div class = 'box'>");
  }
  $(".box").each(function(){
    if(g > 0 && r < 255){
      $(this).css("background", "rgb("+ r + ","+ g + ","+ b + ")");
      g-=1;
      r+=1;
    }
  })
})

.box{
  border:2px solid black;
  margin: 10px;
  width: 20%;
  height: 100px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

之前有人写过这个但是删掉了。

$(function(){
  var r = 20;
  var g = 200;
  var b = 10;
  for(var i = 0; i < 300; i++){
    $("body").append("<div class = 'box'>");
  }

  var noOfBoxes = $(".box").length,
      minRed = 20,
      maxRed = 255,
      maxGreen = 200

  $(".box").each(function(i){
    $(this).css("background", "rgb(" + r + "," + g + "," + b + ")");

    g = parseInt(maxGreen - maxGreen * (i /noOfBoxes), 10)
    r = parseInt(minRed + maxRed * (i/ noOfBoxes), 10)
    console.log(g)
  })
})

.box{
  border:2px solid black;
  margin: 10px;
  width: 20%;
  height: 100px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>