JS获取随机颜色的三种方法

方法一

• 使用for循环6次，模拟生成6位16进制颜色码

• Math.random() * 16 生成一个0到15之间的随机浮点数，然后使用按位或操作符(|)与0进行运算，将其转换为整数。

• toString(16)将这个整数转换成16进制字符串

function getColor() {
  var color = "#";
  // 使用for循环6次，模拟生成6位16进制颜色码
  for (var i = 0; i < 6; i++) {
    // Math.random() * 16 生成一个0到15之间的随机浮点数，
    // 然后使用按位或操作符(|)与0进行运算，将其转换为整数
    // 这样可以确保结果是0到15之间的整数
    // toString(16)将这个整数转换成16进制字符串
    // 将生成的随机16进制字符追加到color字符串中
    color += ((Math.random() * 16) | 0).toString(16);
  }
  return color;
}
console.log(getColor(),'color');

方法二

• 使用Math.random()生成一个0到1之间的随机浮点数，乘以0xffffff（即16777215）得到一个0到16777215之间的随机整数
• 调用Math.floor方法对这个随机数向下取整
• toString(16)将其转换为16进制字符串
• padEnd(6, "0")在字符串结尾补充足够的”0”，使得最终字符串长度为6位

// 使用Math.random()生成一个0到1之间的随机浮点数
// 乘以0xffffff（即16777215）得到一个0到16777215之间的随机整数
// 然后调用Math.floor方法对这个随机数向下取整
// 接着用toString(16)将其转换为16进制字符串
// 最后使用padEnd(6, "0")在字符串结尾补充足够的"0"，使得最终字符串长度为6位
let randomColor="#" + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")
console.log(randomColor,'color');

方法三

• Math.random()生成的是随机16/17位小数.

• 通过toString（36)小数点后的数字转为0-9a-z的值;

• substr(2, 6)从下标2开始，截取6个字符

• 如果想要获取多个字符,6改为指定个数即可

  let color ="#" + Math.random().toString(36).substr(2, 6)
  console.log(color);