Imposta il colore di molte div da verde a rosso

Question

Nel mio progetto potrebbero esserci quantità di div come mille, duemila, un milione ecc. Voglio che i loro colori di sfondo passino dal verde al rosso. quindi tutti hanno una diversa tonalità di colore. il primo div sarà "reale" verde l'ultimo div sarà "reale" rosso.

Ecco quello che ho. Come puoi vedere, alla fine ci sono i div che rimangono senza colore di sfondo. Preferirei risolverlo usando 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

qualcuno ha scritto questo prima, ma eliminato.

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

anzi non mi importa se c'è un po 'di duplicazione. Il punto principale è che all'inizio del display gli utenti vedono verde e più lontano vedono le cose diventare rosse.

provare senza if condizione

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

Prova questa, non incremento e diminuisce il valore di r e g, allo stesso tempo, lo fanno in alternativa ...

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

Un approccio utilizzando csslinear-gradient a background di elemento contenitore che tiene .box elementi, transparentbackground a .box elementi; incluso outline, border per mascherare la visibilità linear-gradient all'esterno del contenitore; nota che questa porzione di css potrebbe ancora essere migliorata. Impostare il ciclo for su iterazioni 2000. linear-gradient dovrebbe visualizzare gradualmente le transizioni di colore previste da lime a red tra 0 a n.box elementi.

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/