我不知道的生成不重复随机数和颜色😄

438 阅读1分钟

趁着中午大佬们都在睡觉,抓紧水一片文章

image.png 那我们开整。

首先根据我的场景来,我的场景是生成10*10的数字矩阵,类似于下图这样。

image.png 废话不多说,直接上代码。

	function generateRandomNumbers() {
		const maxNumber = 100;
		const randomNumbers = [];
		const rows = 10;
		const cols = 10;
		const allNumbers = [];

		for (let r = 1; r <= rows; r++) {
			for (let c = 1; c <= cols; c++) {
				allNumbers.push(r * c);
			}
		}

		while (randomNumbers.length < maxNumber) {
			const randomIndex = Math.floor(Math.random() * allNumbers.length);
			const randomNumber = allNumbers.splice(randomIndex, 1)[0];
			randomNumbers.push(randomNumber);
		}

		return randomNumbers;
	}

在这函数中,我们定义一个generateRandomNumbers函数,该函数利用数组allNumbers包含了一个10*10的所有数字。然后使用while循环从中随机选取数字并放入randomNumbers数组中,直到randomNumbers数组中的长度到达maxNumber为止。这确保了生成100个不重复的随机数。(可以重新封装一下,将范围写在参数中)

如果要生成1-100之间的随机不重复的数字只需要将上面代码修改一行即可。

function generateRandomNumbers() {
const maxNumber = 100;
const randomNumbers = [];
const allNumbers = Array.from({ length: maxNumber }, (_, index) => index + 1);

while (randomNumbers.length < maxNumber) {
 const randomIndex = Math.floor(Math.random() * allNumbers.length);
 const randomNumber = allNumbers.splice(randomIndex, 1)[0];
 randomNumbers.push(randomNumber);
}

return randomNumbers;
}

// 生成不重复随机数数组
const randomNumbersArray = generateRandomNumbers();

// 输出结果
console.log(randomNumbersArray);

接下来我们利用上面随机生成的数字,为每一个随机数字生成一个独有的颜色值。

function numberToColor(number, minNumber, maxNumber) {
  // 定义颜色范围
  const minColor = [0, 0, 255]; // 蓝色
  const maxColor = [255, 0, 0]; // 红色

  // 确保数字在指定范围内
  number = Math.max(minNumber, Math.min(maxNumber, number));

  // 计算颜色渐变的比例
  const ratio = (number - minNumber) / (maxNumber - minNumber);

  // 计算颜色值
  const color = maxColor.map((maxValue, index) => {
    const minValue = minColor[index];
    return Math.round(minValue + ratio * (maxValue - minValue));
  });

  return `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
}

// 生成颜色示例
for (let i = 1; i <= 100; i++) {
  const color = numberToColor(i, 1, 100);
  console.log(color);
}

numberToColor函数接收一个数字,以及数字的最小值和最大值,将数字映射到minColor和maxColor上之间的颜色渐变色。(上述代码增加了注释,中午睡觉要紧,我抓紧写😄)

既然上述已经数字转化成颜色,那我们在提供一个用数字获取颜色的函数,这样它们之间就能相互转换了。

function getColor(number) {
  	const minNumber = 1;
  	const maxNumber = 100;
  	const color = numberToColor(number, minNumber, maxNumber);

  	return color;
  }

这段代码非常简单,今天中午就写到这吧,如果代码有问题,请留言,那就到这吧,散会😄。