Многие Div должны перейти от зеленого к белому и от белого к красному

У меня есть страница с большим количеством 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>

jquery html colors

31.05.2018 08:21

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

он лучше коричневого: p спасибо, мне помогло, никогда не пробую HSL, пока он не интересен :)

— 31.05.2018 08:49

31.05.2018 08:39