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

Question

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

所以我有一个函数可以根据传入的数字生成颜色。如果该数字介于 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 之间的色调值就越高。这有意义吗？

谢谢你 -- 盖维恩

Answer 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

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

如果你希望 hue 是一个整数，只需使用 Math :

hue = Math.floor(number / 5);

在我的示例中，每次向 number 加 5，hue 都会增加 1，number 小于或大于 600 并不重要，因为范围600 两边的 number 是一样的（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;
}

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

How to generate numbers within a range in a non random way with JavaScript?

javascript

math

hsl

colors