javascript - 将许多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

yea I don't mind if there is a little duplication. The main point is that at the beginning of the display users see green and further away they see things turning red.

在没有if条件的情况下尝试

$(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(){
      $(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>