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');
相关推荐
wordbaby2 分钟前
为什么刷新页面就 404?聊聊 SPA 路由与 Nginx 的那点事
前端
daols889 分钟前
vxe-table 渲染器教程一:实现金额输入控件
javascript·vue.js·vxe-table
不好听61322 分钟前
React 核心概念:JSX、组件与数据驱动
前端·react.js
触底反弹23 分钟前
🔥 React 零基础入门(中):500 行屎山代码到组件化的蜕变
前端·javascript·react.js
不好听61323 分钟前
React vs Vue:两大前端框架技术选型深度对比
前端·vue.js·react.js
GuWenyue24 分钟前
Cursor黑盒拆解!1套LangChain.js手写Mini编程Agent,自动生成React项目,效率提升60%
前端·数据库·人工智能
GuWenyue25 分钟前
传统Agent工具两大痛点!300行代码落地MCP跨语言工具,彻底解耦LLM与工具
前端·人工智能·算法
小林ixn1 小时前
从 onclick 到 React 合成事件,再到完整应用逻辑:一次前端架构的深度剖析
前端·react.js·前端框架
Csvn2 小时前
🧩「找不到模块」排查全记录——Monorepo 下 TypeScript 路径别名的 5 种「不通」与根治方案
前端
腻害兔2 小时前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解:字典、短信、邮件、通知——后台系统的“基础设施四件套“!
java·前端·vue.js·产品经理·ai编程