很多Div需要从绿色到白色，从白色到红色

Question

我有一个由数据库创建的很多div的页面，每个div显示不同的颜色，从绿色到红色（我增加红色并减少绿色），但在之间，有一个丑陋的棕色......所以我认为从绿色到白色，白色到绿色的眼睛更好，但我找不到解决方案：/

var R=0;
var V=255;
var B=0;
var divi=255/($('.ordreprio').length-1);
$('.ordreprio').each(function(){

  $(this).css("background-color","rgb("+R+","+V+","+B+")");
       
  R=R+divi;
  V=V-divi;
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="recherchemot">
 
    <div class="ordreprio">
        mon texte par a été trouvé 1 fois sur le cours 8
            <form method="post" action="./coursrecherche.php" name="formcours8"><input type="hidden" name="valuecours" value="8"></form>    </div>
        <br><br>
            <div class="ordreprio">
        mon texte par a été trouvé 1 fois sur le cours 4
            <form method="post" action="./coursrecherche.php" name="formcours4"><input type="hidden" name="valuecours" value="4"></form>    </div>
        <br><br>
            <div class="ordreprio">
        mon texte par a été trouvé 1 fois sur le cours 5
            <form method="post" action="./coursrecherche.php" name="formcours5"><input type="hidden" name="valuecours" value="5"></form>    </div>
        <br><br>
            <div class="ordreprio">
        mon texte par a été trouvé 1 fois sur le cours 6
            <form method="post" action="./coursrecherche.php" name="formcours6"><input type="hidden" name="valuecours" value="6"></form>    </div>
        <br><br>
            <div class="ordreprio">
        mon texte par a été trouvé 1 fois sur le cours 1
            <form method="post" action="./coursrecherche.php" name="formcours1"><input type="hidden" name="valuecours" value="1"></form>    </div>
        <br><br>
            <div class="ordreprio">
        mon texte par a été trouvé 1 fois sur le cours 2
            <form method="post" action="./coursrecherche.php" name="formcours2"><input type="hidden" name="valuecours" value="2"></form>    </div>
        <br><br>
            <div class="ordreprio">
        mon texte par a été trouvé 1 fois sur le cours 3
            <form method="post" action="./coursrecherche.php" name="formcours3"><input type="hidden" name="valuecours" value="3"></form>    </div>
        <br><br>
          
</div>

Answer 1

当我需要生成此类渐变时，我通常会使用HSL个单位。红色的色调为0（hsl(0, 100%, 50%)），绿色为120（hsl(120, 100%, 50%)），因此通过将色调从0更改为120，您可以将颜色从红色更改为绿色。 （而不是介于两者之间，你会变黄。）

以下是您更新的示例：

＆＃13;

＆＃13;

var red = 0;
var green = 120;
var increment = (red + green) / ($('.ordreprio').length - 1);

var hue = red;
$('.ordreprio').each(function() {

  $(this).css("background-color", "hsl(" + hue + ", 100%, 50%)");

  hue += increment;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="recherchemot">

  <div class="ordreprio">
    mon texte par a été trouvé 1 fois sur le cours 8
    <form method="post" action="./coursrecherche.php" name="formcours8"><input type="hidden" name="valuecours" value="8"></form>
  </div>
  <br><br>
  <div class="ordreprio">
    mon texte par a été trouvé 1 fois sur le cours 4
    <form method="post" action="./coursrecherche.php" name="formcours4"><input type="hidden" name="valuecours" value="4"></form>
  </div>
  <br><br>
  <div class="ordreprio">
    mon texte par a été trouvé 1 fois sur le cours 5
    <form method="post" action="./coursrecherche.php" name="formcours5"><input type="hidden" name="valuecours" value="5"></form>
  </div>
  <br><br>
  <div class="ordreprio">
    mon texte par a été trouvé 1 fois sur le cours 6
    <form method="post" action="./coursrecherche.php" name="formcours6"><input type="hidden" name="valuecours" value="6"></form>
  </div>
  <br><br>
  <div class="ordreprio">
    mon texte par a été trouvé 1 fois sur le cours 1
    <form method="post" action="./coursrecherche.php" name="formcours1"><input type="hidden" name="valuecours" value="1"></form>
  </div>
  <br><br>
  <div class="ordreprio">
    mon texte par a été trouvé 1 fois sur le cours 2
    <form method="post" action="./coursrecherche.php" name="formcours2"><input type="hidden" name="valuecours" value="2"></form>
  </div>
  <br><br>
  <div class="ordreprio">
    mon texte par a été trouvé 1 fois sur le cours 3
    <form method="post" action="./coursrecherche.php" name="formcours3"><input type="hidden" name="valuecours" value="3"></form>
  </div>
  <br><br>

</div>

＆＃13;

＆＃13;

＆＃13;