很多 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，您可以将颜色从红色更改为绿色。 （虽然中间不是白色，而是黄色。）

这是您的示例更新：

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;
});

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