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');
相关推荐
天天扭码3 分钟前
在项目中常见的main.js和main.mjs有什么区别,我们该如何选择?
前端·javascript·面试
姑苏洛言12 分钟前
在开发扫码小程序中,遇到胡坑“require() 默认不支持绝对路径”及其解决方案
前端
Passerby_K13 分钟前
vue3+dhtmlx 甘特图真是案例
前端·vue·甘特图
佳腾_19 分钟前
【Web应用服务器_Tomcat】二、Tomcat 核心配置与集群搭建
java·前端·中间件·tomcat·web应用服务器
brzhang1 小时前
代码即图表:dbdiagram.io让数据库建模变得简单高效
前端·后端·架构
三巧1 小时前
纯CSS吃豆人(JS仅控制进度)
javascript·css·html
SummerGao.1 小时前
【解决】layui layer的提示框,弹出框一闪而过的问题
前端·layui
软件技术NINI1 小时前
html css js网页制作成品——HTML+CSS+js美甲店网页设计(5页)附源码
javascript·css·html
天天扭码1 小时前
从数组到对象:JavaScript 遍历语法全解析(ES5 到 ES6 + 超详细指南)
前端·javascript·面试
拉不动的猪2 小时前
前端开发中常见的数据结构优化问题
前端·javascript·面试