如何使用 JavaScript 以非随机方式生成范围内的数字？答案

【问题标题】：How to generate numbers within a range in a non random way with JavaScript?如何使用 JavaScript 以非随机方式生成范围内的数字？
【发布时间】：2015-10-13 12:22:37
【问题描述】：

我知道如何在两个数字之间生成一个随机数。但我想要实现的是一种以不完全随机的方式在两个数字之间生成数字的方法。让我解释一下……

所以我有一个函数可以根据传入的数字生成颜色。如果该数字介于 0 和 600 之间，我希望它将一个介于 0 和 120 之间的数字传递给 hsl 值的色调。如果数字大于 600，我希望将 120 到 240 之间的数字传递给 hsl 值的色调。我的函数看起来像这样：

getColor:function (number {
  var hue;
  var color;
  if (number <= 600) {
    hue = [A number between 0 and 120];
  } else if (number >= 600) {
    hue = [A number between 120 and 240];
  }
  color = 'hsl(' + hue + ', 100%, 80%)'
  return color;
 }

所以传入函数的数字越大，例如0到600之间，0到120之间的色调值就越高。这有意义吗？

谢谢你 -- 高文

【问题讨论】：

你说“我知道如何在两个数字之间生成一个随机数”......那么为什么不这样做呢？ hue = [A number between 0 and 120]; 0 和 120 是两个数字....
好的，让我详细说明一下。我希望传入数字 60 时生成的颜色与传入数字 70 时生成的颜色相似，但明显不同。例如，如果我将数字 60 两次传递给函数，我还希望每次都生成相同的颜色。现在，我可以传入 60，得到一个介于 0 到 120 之间的完全随机值，然后再次传递 60，得到另一个完全随机值。脱离我的项目背景，这听起来有点令人困惑。但这是否更有意义？
所以制作一张表格，将一个数字映射到另一个数字。

标签： javascript math colors hsl

【解决方案1】：

简单数学：

hue = Math.floor(number * 120 / 600);

或两点：

function transpose(smin, smax, dmin, dmax) {
    var slen = smax - smin;
    var dlen = dmax - dmin;
    var ratio = dlen / slen;
    return function(num) {
      return num * ratio + smin;
    }
}

transpose(0, 600, 0, 120)(300); // 60

【讨论】：

我在学校数学不及格。简单的数学很难;_;谢谢你。忘记了 Math.floor()。
对，如果您需要浮点数，请跳过Math.floor。
浮点数而不是整数，使用 Math.floor 向下舍入实际上可能更可取。谢谢！

【解决方案2】：

好的，首先你应该知道number 的最大值和最小值。在我的例子中，number 的最大值为 1200，最小值为 0，所以范围在 0 到 1200 之间。hue 的范围在 0 到 240 之间。

传递给函数的number 越高，hue 的值就越高。

0 hue = 0 number;

120 hue = 600 number;

240 hue = 1200 number;

=> 1 hue = (600 / 120) number = (1200 / 240) number

=> 1 hue = 5 number

在我的示例中，（number 介于 0 和 1200 之间，600 是中间值）hue 中的 1 值等于 number 中的 5 值。所以：

hue = number / 5;

如果您希望色调为整数，只需使用 Math ：

hue = Math.floor(number / 5);

在我的示例中，hue 每次将 5 加到 number 时都会增长 1，number 小于或大于 600 无关紧要，因为 number 的范围在两侧600 相同（600 在范围的中间）。如果这不是您想要的，并且 600 不在范围的中间，您将不得不进行两次以上相同的计算。

var max = [maximum value of number];
var min = [minimum value of number];

getColor:function (number {
   var hue;
   var color;
   if (number <= 600) {
      hue = Math.floor( number / ((600 - min) / 120) );
   } else if (number >= 600) {
      hue = Math.floor( number / ((max - 600) / 120) ) + 120;
   }
   color = 'hsl(' + hue + ', 100%, 80%)';
   return color;
}

【讨论】：