趁着中午大佬们都在睡觉,抓紧水一片文章
那我们开整。
首先根据我的场景来,我的场景是生成10*10的数字矩阵,类似于下图这样。
废话不多说,直接上代码。
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;
}
这段代码非常简单,今天中午就写到这吧,如果代码有问题,请留言,那就到这吧,散会😄。