Question

我正在使用HTML / CSS / JS制作轮盘。工作原理：轮盘赌圈是由15个圆圈组成的背景图像。 7red 7blue和1green。 background-img是repeat-x，因此它永远不会结束。然后，JavaScript将背景img的px位置随机化，而不是轮盘赌图像移至该px。例如，如果将17839随机化，则轮盘img将移至该点。现在，我试图弄清楚如何用颜色告诉javascript轮盘停止。

我的问题是“ 如何循环一个数组（或副本），以便它在下面具有至少2000个字符串的模式索引？”

我试图制作一个数组：

var colors = ["red", "blue", "red", "blue", "red", "blue", "red", "blue", "red", "blue", "red", "blue", "red", "blue", "green"];

然后以某种方式循环以使数组很长。可以随机化的最大px为20000。每个色环为100px。这使整个模式长1500px。这意味着我需要一个至少2000个字符串长的数组。自己写这么长的数组感觉很不对，所以我试图循环颜色数组以使其更长。

这是我希望它如何工作的一些示例。

随机数是1534。

random = 1534; //randomized pixel number
position = Math.floor(random/1500); //dividing the random number with patern lenght
arrayConv = position - 1; //converting to an arrayIndex

结果将为1，表示颜色为红色（数组索引0）

随机数是17534。

random = 17534; //randomized pixel number
position = Math.floor(random/1500); //dividing the random number with patern lenght
arrayConv = position - 1; //converting to an arrayIndex

结果将为11，表示颜色为红色（数组索引为10）

Answer 1

正如您所说，最后有7个蓝色和7个红色块，以及1个绿色。因此，我们可以假设蓝色/红色可以取决于偶数/奇数生成的数字，除非数字可以除以15的情况-在这种情况下，这意味着绿色。

function resolveColor(number) {
  if (number % 15 === 0) {
    return 'green';
  }
  if (number % 2 === 0) {
    return 'red';
  }
  return 'blue';
}

const x = Math.ceil(Math.random()*20000);
console.log('Generated number: ', x);
console.log('Result is: ', resolveColor(x));

Answer 2

以前由 Irr 和 Marchewka PL 讨论过。共有三种颜色，随机结果计算得出的px始终介于1到15之间。您可以将红色和蓝色分别指定为奇数和偶数，并且将绿色设置为默认颜色。在条件语句中。

如何在JavaScript中循环数组

2 个答案: