Stellen Sie die Farbe vieler Divs von grün bis rot ein

Question

In meinem Projekt könnte es jede Menge divs wie tausend, zweitausend, eine Million usw. geben. Ich will, dass ihre Hintergrundfarben von grün zu rot gehen. So bekommen sie alle einen anderen Farbton. das erste div wird "real" grün sein, das letzte div wird "real" rot sein.

Hier ist was ich habe. Wie Sie sehen können, sind am Ende Divs ohne Hintergrundfarbe. Ich würde es bevorzugen, dies mit rgb zu lösen.

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

Jemand schrieb dieses früher, aber es gelöscht.

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

Answer 2

ja ich nichts dagegen, wenn es ein wenig Vervielfältigung ist. Der Hauptpunkt ist , dass am Anfang des Displays Benutzer grün und weiter weg sehen sie sehen, dass die Dinge rot werden.

Versuchen ohne if Zustand

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

Try this, erhöhe nicht und vermindert den Wert von r und g zugleich, tun Sie es alternativ ...

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

Ein Ansatz csslinear-gradient bei background Behälterelement verwendet .box Halteelemente, transparentbackground bei .box Elementen; enthalten outline, border zu Maske linear-gradient Sichtbarkeit auf der rechten Seite des Containers; Beachten Sie, dass dieser Teil von css noch verbessert werden könnte. Setzen Sie for Schleife auf 2000 Iterationen. linear-gradient sollte die erwarteten Farbübergänge schrittweise von lime bis red zwischen 0 bis n.box anzeigen.

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/