获取评级栏的颜色范围

Question

我想创建一个简单的HTML评级栏。我的评级栏有一个动态数量的容器。例如5：

我需要计算颜色值[first + 2，last-1]。给出了第一种和最后一种颜色。

＆＃13;

＆＃13;

$(document).ready(function() {
  ratingElements = $(".ratingEle"); // Find all rating containers

  ratingColors.push(initialColorDefault); // if not selected, set the container to gray // index 0
  ratingColors.push(initialColorMin); // red color // index 1

  // !! Calculate the missing colors here !!
  // from index 2 to ratingColors.length - 1
  // ratingColors.push("#" + hexValue);

  updateRatingBar(0); // set all containers to gray

  $(ratingElements).each(function(index, element) { // add some event handlers to the containers
    var ele = $(element);
    var i = index + 1;

    ele.click(function() {
      setRating(i);
    });

    ele.hover(function() {
      updateRatingBar(i);
    });

  });

});

var ratingElements;
var ratingColors = [];

var initialColorDefault = "#cccccc"; // pre set colors
var initialColorMin = "#ff0000";
var initialColorMax = "#80ff00";

function setRating(currentValue) { // click handler
  $("#ratingOutput").html(currentValue + " / " + ratingElements.length);
  updateRatingBar(currentValue);
}

function updateRatingBar(currentValue) { // set colors
  $(ratingElements).each(function(index, element) {
    var i = index;

    if (i > currentValue) {
      i = 0;
    }

    $(element).css('background-color', ratingColors[i]);
  });
}

＆＃13;

.ratingEle {
  float: left;
  cursor: pointer;
  height: 10px;
  width: 30px;
  margin-left: 5px;
}

＆＃13;

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

<div id="rating">

  <div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
  </div>

  <div>
    <p id="ratingOutput"></p>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

正如您所看到的，我需要计算颜色才能使其正常工作。我在JS文件中设置了一个缺失的部分，需要帮助，计算它。

我不知道我是否应该使用hex或rgb值。

将鼠标悬停在容器上时，颜色应自动更新。单击容器时，应设置一个值。

但我已经证明了这一点，我只需要计算缺失的颜色范围。

Answer 1

this answer as base

＆＃13;

＆＃13;

.ratingEle {
  float: left;
  cursor: pointer;
  height: 10px;
  width: 30px;
  margin-left: 5px;
}

＆＃13;

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

<div id="rating">

  <div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
  </div>

  <div>
    <p id="ratingOutput"></p>
  </div>

</div>

＆＃13;

$(function() {
  var color1 = 'ff0000';
  var color2 = '80ff00';
  var ratio = 1 / $('.ratingEle').length;
  
  var hex = function(x) {
      x = x.toString(16);
      return (x.length == 1) ? '0' + x : x;
  };
  $i=1;
  $('.ratingEle').each(function() {
    var r = Math.ceil(parseInt(color1.substring(0,2), 16) * (ratio*$i) + parseInt(color2.substring(0,2), 16) * (1-(ratio*$i)));
    var g = Math.ceil(parseInt(color1.substring(2,4), 16) * (ratio*$i) + parseInt(color2.substring(2,4), 16) * (1-(ratio*$i)));
    var b = Math.ceil(parseInt(color1.substring(4,6), 16) * (ratio*$i) + parseInt(color2.substring(4,6), 16) * (1-(ratio*$i)));

    var color = hex(r) + hex(g) + hex(b);
    $(this).css('background-color', '#'+color);
    $i++;
  });

});

＆＃13;

＆＃13;

＆＃13;

包含更多元素

＆＃13;

＆＃13;

.ratingEle {
  float: left;
  cursor: pointer;
  height: 10px;
  width: 30px;
  margin-left: 5px;
}

＆＃13;

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

<div id="rating">

  <div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
  </div>

  <div>
    <p id="ratingOutput"></p>
  </div>

</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;