主页 / 问题 / 816755
Accepted
Telion
Asked:2020-04-20 14:55:47 +0000 UTC2020-04-20 14:55:47 +0000 UTC

按用户级别计算颜色

  • 772

重点是这个。随着时间的推移，用户通过使用该网站获得了经验。进度条的颜色随着用户的等级而变化。颜色可以通过 HEX 或 RGB 代码设置，但我很困惑。我确信这可以用一些数学公式来表达，但显然我没有学好数学。

级别就像一个数字序列：从 1 到无穷大。这是公式中唯一已知的参数。有必要以一种颜色从一种颜色到另一种颜色的非常平滑的方式来表达它。也就是说，如果之前的颜色是(0, 0, 5)，那么下一个级别会将其更改为(0, 0, 6)。但这还不是全部。为了避免黑色和白色，我认为从蓝色过渡到绿色，然后从那里过渡到红色会更正确。如果颜色用完了，那么它们将继续使用新的颜色。

所以从 开始(0, 0, 255)，然后是绿色(0, 255, 0)，然后是红色(255, 0, 0)。但接下来要注意的是，每对颜色之间都会有一个所谓的中间色。例如，蓝色和绿色之间将是(0, 255, 255)。之后，蓝色将开始下降到 0。

在过去的 3 个小时里，我已经很好地打破了我的头，写了一篇关于需要做什么的完全不合逻辑的猜测。也许有人处理过类似的事情并会举出例子？或者至少在理论上暗示了如何做到这一点？

javascript

3 个回答

  1. 你可以使用hsl- 第一个参数负责颜色。没错，我不知道您如何想象无限显示......毕竟，颜色的数量是有限的。但是你可以想象这样的事情。

    function setColorLevels() {
  for (var i = 0; i < 1000; i++) {
    var elem = document.createElement('div');
    elem.style.backgroundColor = `hsl(${360-i*4-110},100%,50%)`;
    elem.innerText = `level ${i}`;
    content.appendChild(elem);
  }
}
setColorLevels();
    <content id="content"></content>

    • 6

  2. 您可以使用 hsl 颜色

    let getTemperatureColor = (value) => ['hsl(', value, ',100%,50%)'].join('');

for (let i = 240; i >= 0; i--) {
  var d = document.createElement('div');
  d.style.backgroundColor = getTemperatureColor(i);
  document.body.appendChild(d);
}
    div {
  width: 2px;
  height: 20px;
  float: left;
}

    如果支持的浏览器允许模板字符串，那么您可以进一步简化。

    for (let i = 240; i >= 0; i--) {
  var d = document.createElement('div');
  d.style.backgroundColor = `hsl(${i}, 100%,50%)`;
  document.body.appendChild(d);
}
    div {
  width: 2px;
  height: 20px;
  float: left;
}

    定时器选项：

    let getTemperatureColor = (value) => ['hsl(', value, ',100%,50%)'].join('');
let i = 240;

setInterval(function() {
  i--;
  document.getElementById('status').style.backgroundColor = getTemperatureColor(i);
}, 25);
    div {
  width: 50px;
  height: 50px;
}
    <div id="status"></div>

    • 5
  3. Best Answer

    在这种情况下鲜花会发生什么：

     lvl   r   g   b
   0   0   0 255
   1   0   1 255
 254   0 254 255
 255   0 255 255
 256   0 255 254
 509   0 255   1
 510   0 255   0
 511   1 255   0
 764 254 255   0
 765 255 255   0
 766 255 254   0
1019 255   1   0
1020 255   0   0
1021 255   0   1
1274 255   0 254
1275 255   0 255
1276 254   0 255
1529   1   0 255
1530   0   0 255

    结果，周期为 1530 级（迭代）。因此，要计算颜色值，取 就足够了level % 1530。

    正面解决方案：

    var colorBlock = document.getElementById("color");
var level = 0;

setInterval(function() {
  var levelBase = level % 1530;

  var red = 0;
  if (levelBase >= 511 && levelBase <= 765)
    red = levelBase - 510;
  else if (levelBase >= 766 && levelBase <= 1275)
    red = 255;
  else if (levelBase >= 1276 && levelBase <= 1529)
    red = 1530 - levelBase;

  var green = 0;
  if (levelBase <= 255)
    green = levelBase;
  else if (levelBase <= 765)
    green = 255;
  else if (levelBase <= 1020)
    green = 1020 - levelBase;

  var blue = 0;
  if (levelBase <= 255 || levelBase >= 1276)
    blue = 255;
  else if (levelBase <= 510)
    blue = 510 - levelBase;
  else if (levelBase >= 1021 && levelBase <= 1275)
    blue = levelBase - 1020;

  colorBlock.style.backgroundColor = "rgb(" + red + "," + green + "," + blue + ")";
  colorBlock.innerText = level + " " + red + " " + green + " " + blue;
  level++;
}, 10);
    #color {
  width: 200px;
  height: 200px;
}
    <div id="color"></div>

    levelBase您可以通过将用于确定颜色值的逻辑移动到单独的函数中，将代码行数从 34 减少到 24 ：

    var colorBlock = document.getElementById("color");
var level = 0;

setInterval(function() {
  var levelBase = level % 1530;
  var red = getColorValue(levelBase, [511, 764], [1276, 1530], [765, 1275]);
  var green = getColorValue(levelBase, [1, 254], [766, 1020], [255, 765]);
  var blue = getColorValue(levelBase, [1021, 1274], [256, 510], [0, 255], [1275, 1529]);
  colorBlock.style.backgroundColor = "rgb(" + red + "," + green + "," + blue + ")";
  colorBlock.innerText = level + " " + red + " " + green + " " + blue;
  level++;
}, 10);

function getColorValue(levelBase, incRange, decRange, maxValueRange, maxValueRange2) {
  if (levelBase >= incRange[0] && levelBase <= incRange[1])
    return levelBase - incRange[0];
  if (levelBase >= decRange[0] && levelBase <= decRange[1])
    return decRange[1] - levelBase;
  if (levelBase >= maxValueRange[0] && levelBase <= maxValueRange[1])
    return 255;
  if (maxValueRange2 != null && levelBase >= maxValueRange2[0] && levelBase <= maxValueRange2[1])
    return 255;
  return 0;
}
    #color {
  width: 200px;
  height: 200px;
}
    <div id="color"></div>

    颜色的人工“对齐”将行数从 24 减少到 19，并缩短了一些代码行：

    var colorBlock = document.getElementById("color");
var level = 0;

setInterval(function() {
  var red = getColorValue((level + 1020) % 1530);
  var green = getColorValue(level % 1530);
  var blue = getColorValue((level + 510) % 1530);
  colorBlock.style.backgroundColor = "rgb(" + red + "," + green + "," + blue + ")";
  colorBlock.innerText = level + " " + red + " " + green + " " + blue;
  level++;
}, 10);

function getColorValue(levelBase) {
  if (levelBase <= 254)
    return levelBase;
  if (levelBase <= 765)
    return 255;
  return levelBase <= 1020 ? 1020 - levelBase : 0;
}
    #color {
  width: 200px;
  height: 200px;
}
    <div id="color"></div>

    • 4

相关问题