JS获取随机颜色(两种方法)

一、代码注释详解

方法一

  • 使用for循环6次,模拟生成6位16进制颜色码
  • Math.random() * 16 生成一个0到15之间的随机浮点数,然后使用按位或操作符(|)与0进行运算,将其转换为整数
  • toString(16)将这个整数转换成16进制字符串
scss 复制代码
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位
javascript 复制代码
// 使用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');
相关推荐
IT_陈寒1 天前
Python 3.12 的7个性能优化技巧,让你的代码快如闪电!
前端·人工智能·后端
excel1 天前
JSON 使用指南:从基础语法到 stringify/parse 的高级技巧
前端
yinuo1 天前
Uni-App跨端开发实战:编译APP跳转全平台终极指南(02)
前端
楼田莉子1 天前
前端学习——CSS
前端·css·学习
掘金安东尼1 天前
理解 Promise.any():一次成功就行
前端·javascript·面试
掘金安东尼1 天前
CSS 电梯:纯 CSS 实现的状态机与楼层导航
前端·javascript·github
张风捷特烈1 天前
FlutterUnit 3.3.0 | 全组件、全属性、鸿蒙支持来袭
android·前端·flutter
安心不心安1 天前
React Router 6 获取路由参数
前端·javascript·react.js
fuyongliang1231 天前
Linux shell 脚本基础 003
java·服务器·前端
lypzcgf1 天前
Coze源码分析-工作空间-项目开发-前端源码
前端·人工智能·typescript·系统架构·开源软件·react·安全架构