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

- jack blank

---

可能是为电力计生成红色和绿色之间的颜色？的重复问题。 - Steve

@steve 我不理解最佳答案。如果我执行 R = (255 * n) / 100 并且 n == 1，我会得到 2.55。我认为我不能将小数作为 RGB 值。我之前尝试过。 - jack blank

@jackblank：“是的，我不介意有一些重复。主要的问题是在显示开始时用户看到绿色，而越远他们看到的东西就会变成红色。”，“这是一个动态的数量，但它可能少于2000”。尝试没有if条件的代码：https://jsfiddle.net/0kL4f59z/？ - guest271314

但是我指的是另一个人。库什纳，我想他的名字是这样的。尽管在1000个div中有5个具有相同背景，但我喜欢他的风格。我更喜欢少一些重复。 - jack blank

@jackblank 不确定该方法是否返回了预期结果。将取消删除。 - guest271314

显示器只能显示约17M种颜色。这是所有颜色，不仅仅是这两个（以及它们之间的颜色）。如果您有1M个div，您将看到许多重复。相反，也许您应该考虑使用多种颜色，或者来回振荡颜色。 - vol7ron

Answer 1

没关系，有些重复也无妨。主要是在显示屏一开始用户能看到绿色的，越往远处看，就会逐渐变成红色。

尝试不使用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>

- guest271314

---

@jackblank 在 r 从 0 开始，g 从 255 开始的情况下 https://jsfiddle.net/0kL4f59z/1/ - guest271314

我以前从未知道RGB值可以设置为负数。你正在将绿色值设为负数。当它低于0时会发生什么？它只是变成黑色吗？G会变为0吗？ - jack blank

@jackblank 没有负值。 一旦值达到0，值不会减少到负值。 可能还有另一种方法，正在尝试中。 - guest271314

我喜欢其他人的答案，我刚刚注意到如果我做一千个div，最后会有765个div的背景是rgb(255, 0, 10)，重复太多了。 - jack blank

Answer 2

尝试这样做，不要同时增加和减少r和g的值，而是交替进行...

$(function(){
  var r = 55
  var g = 200;
  var b = 0;
  for(var i = 0; i < 300; i++){
    $("body").append("<div class = 'box'>");
  }
  $(".box").each(function(i){
    if(g > 0 && r < 255){
       $(this).css("background", "rgb("+ r + ","+ g + ","+ b + ")");
       if(i%2 == 0)
       {
         g-=1;
       }
       else
       {
         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>

- Manjeet Barnala

Answer 3

一种方法是在容纳 .box 元素的容器元素的背景中使用css linear-gradient，并在 .box 元素上使用 transparent background; 在容器的右侧外部添加 outline 和 border 以遮盖 linear-gradient 的可见性; 注意这部分的 css 仍然可以改进。将for 循环设置为 2000 次迭代。从第一个到第n个 .box 元素之间逐渐显示期望的颜色过渡（从 lime 到 red）。

for (var i = 0, container = document.getElementById("container"); i < 2000; i++) {
  container.insertAdjacentHTML("beforeend", "<div class=box></div>");
};

body {
  overflow-x: hidden;
}
#container {
  background: linear-gradient(to bottom, lime, red);
  outline:25px solid #fff;
  border:25px solid #fff;
  width: calc(100vw - 2.5%); /* adjusted for width of stacksnippets */
  height: auto;
  display: block;
  overflow-x: hidden;
}
.box {
  border: 2px solid black;
  margin: 10px;
  width: 20%;
  height: 100px;
  float: left;
  background: transparent;
  outline: 20px solid #fff;
}

<div id="container">
</div>

jsfiddle https://jsfiddle.net/0kL4f59z/5/

该句话的意思是：在jsfiddle上有一个链接 https://jsfiddle.net/0kL4f59z/5/。

- guest271314

Answer 4

有人之前写了这篇文章，但已经删除了。

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

- jack blank