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

是的，我不介意是否有一点重复。重点是在显示开始时用户看到绿色和更远的地方他们看到事情变红了。

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

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>

Answer 3

利用css linear-gradient容器background容纳.box元素的transparent background .box outline border元素;包含linear-gradient，css以屏蔽容器外部的for可见性;请注意2000的这部分仍然可以改进。将linear-gradient循环设置为lime次迭代。 red应在0到n .box元素之间逐渐显示从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>

[self.tableData reloadData];

CLLocation *locationLast=[[AppDelegate sharedDelegate].arrayLocations lastObject];

CLLocation *locationSecondLast=[[AppDelegate sharedDelegate].arrayLocations objectAtIndex:[[AppDelegate sharedDelegate].arrayLocations count]-2];
CLLocationSpeed speed = locationLast.speed - locationSecondLast.speed;
lblSpeedDiffrence.text = [NSString stringWithFormat:@"%.4f MPH", (float)(speed * 2.23693629)];
NSTimeInterval timeDifference = [locationLast.timestamp timeIntervalSinceDate:locationSecondLast.timestamp];
lblTimeDiffrence.text = [NSString stringWithFormat:@"%f seconds", timeDifference];
double HardAcceleration = (speed * 2.23693629) / timeDifference;
if (HardAcceleration>0)
{
     if (HardAcceleration>10)
         lblStatus.text = @"Hard Acceleration";
     else
         lblStatus.text = @"Acceleration";
}
else if (HardAcceleration<0)
{
     if (HardAcceleration<-10)
         lblStatus.text = @"Hard Deceleration";
     else
         lblStatus.text = @"Deceleration";
}
else
{
     lblStatus.text = @"Neutral";
}

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

Answer 4

之前有人写过，但删除了它。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: