一句JS代码,实现随机颜色的生成

今天我们只用 一句JS代码,实现随机颜色的生成,首先看一下效果:

每次刷新浏览器背景颜色都不一样

实现此效果的JS函数 :

  1. let randomColor = () => ...: 定义一个箭头函数randomColor,用于生成一个随机颜色。
    • Math.random(): 生成一个0到1之间的随机数。
    • Math.random() * 0xffffff: 将这个随机数乘以0xffffff(即16777215,这是16进制表示的最大值),得到一个0到16777215之间的随机整数。
    • Math.floor(...): 对上述结果进行向下取整,确保得到的是一个整数。
    • .toString(16): 将这个整数转换为16进制字符串。
    • `#${...}`: 将16进制字符串包裹在#符号中,形成CSS颜色代码的格式。
  2. document.body.style.backgroundColor = randomColor(): 调用randomColor函数生成一个随机颜色,并将其设置为<body>元素的背景颜色。

实现原理

  • 使用JavaScript的Math.random()函数生成一个0到1之间的随机数。
  • 将这个随机数乘以0xffffff,得到一个0到16777215之间的随机整数。
  • 使用Math.floor()函数将结果向下取整,确保得到的是一个整数。
  • 使用.toString(16)方法将整数转换为16进制字符串。
  • 将16进制字符串包裹在#符号中,形成CSS颜色代码的格式。
  • 将生成的随机颜色代码设置为<body>元素的背景颜色。

完整代码:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Document</title></head><body><script>// 定义一个函数,生成一个随机的颜色let randomColor = () =>`#${Math.floor(Math.random()*0xffffff).toString(16)}`// 将body的背景颜色设置为随机生成的颜色document.body.style.backgroundColor = randomColor()</script></body>
</html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3281713.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

丰田精益生产模式落伍了?揭秘其背后的真相与未来展望

在竞争激烈的全球汽车市场中&#xff0c;丰田汽车公司凭借其独特的精益生产模式&#xff08;Lean Production&#xff09;一直占据着举足轻重的地位。然而&#xff0c;近年来&#xff0c;随着一系列质量丑闻的曝光&#xff0c;如尾气排放测试数据造假等&#xff0c;不禁让人质疑…

我终于搭建完成了我的个人网站!(仅分享,非教程)

先看看我的个人网站~ https://yaoqx.pages.devhttps://yaoqx.pages.dev 来看看我搭建的过程吧&#xff01; &#xff08;仅分享&#xff0c;非教程&#xff09; 网站技术 前端框架&#xff1a;Astro主题&#xff1a;Frosti代码托管&#xff1a;Github网页部署&#xff1a;Cl…

【网络协议】HTTP协议详解

文章目录 一、概念 二、简史 三、特点 四、工作流程 五、使用Wireshark抓TCP、http包 六、头域 6.1、请求信息&#xff1a; 6.2、请求方法 6.3、响应消息 6.4、响应头域 6.5、HTTP常见的请求头 6.6、HTTP常见的响应头 七、解决HTTP无状态的问题 7.1、通过Cookies保存状态信息 7…

【Hot100】LeetCode—64. 最小路径和

目录 题目1- 思路2- 实现⭐ 最小路径和——题解思路 3- ACM 实现 题目 原题连接&#xff1a;64. 最小路径和 1- 思路 不同的路径 ——> 多维 dp ——> 每次只能向下或者向右一步 ——> 动规五部曲 两个方向定义递推公式 2- 实现 ⭐ 最小路径和——题解思路 class S…

谁是金融核心系统市场第一名?中兴通讯旗下金篆GoldenDB

从IDC发布的《中国银行业本地部署分布式事务型数据库市场份额&#xff0c;2023》报告来看&#xff0c;中兴通讯旗下的金篆GoldenDB以24.8%的市场份额在银行业本地部署分布式数据库市场中独占鳌头&#xff0c;排名“第一”。    毕竟关系着人民群众的财产安全&#xff0c;银行…

宝通科技携手昇腾技术首席陈仲铭,共探工业大模型与生态发展

在人工智能技术的浪潮中&#xff0c;宝通科技始终致力于探索和应用前沿技术&#xff0c;推动工业智能化的发展。7月26日&#xff0c;宝通科技特邀昇腾生态技术首席陈仲铭博士&#xff0c;为宝通员工带来了一场主题为《工业大模型与业界发展生态》的技术分享会。本次分享会不仅为…

TL-SEJ 方法:有效对抗语音伪造攻击

关键词&#xff1a;语音增强、迁移学习、模型鲁棒性、U-Net模型 随着人工智能技术的快速发展&#xff0c;基于深度学习的语音转换&#xff08;Voice Conversion, VC&#xff09;和文本到语音&#xff08;Text-to-Speech, TTS&#xff09;技术取得了显著的进步。这些语音合成技术…

盘点:ITSS服务项目经理证书的用途

ITSS服务项目经理证书&#xff0c;由中国信息通信研究院ITSS服务与管理研究中心开发&#xff0c;是ITSS服务领域的权威认证。 此证书主要面向从事ITSS服务项目管理工作的人员&#xff0c;通过考试获取&#xff0c;意味着持有者在ITSS服务项目管理方面具备专业能力和知识。 1. …

科普什么是大模型?

这半年来&#xff0c;“大模型”一词飞入寻常百姓家&#xff0c;以前只是在IT圈相对较为封闭的圈子里流传。这一词的大规模爆发&#xff0c;原因在于ChatGPT的推出和广泛使用。其实类似“GPT”的模型还有很多&#xff0c;百度&#xff0c;阿里&#xff0c;腾讯和字节跳动等公司…

BEVDet BEVDet4D

榜单上的模型还没有达到很成熟 规划控制也在bev中处理 BEVDet 以分类的方式预测一个深度。 前端图像主干网络提取特征的输入的图像是经过数据增强的&#xff0c;进入BEV Encoder之前&#xff0c;需要将图像逆变回来。图像的变化不会影响BEV空间的特征。BEV Encoder没有经过预…

替代TLD5190同步四开关升降压LED专用电源调节器,支持PWM调光功能,具有强制电流调节模式

特征:PC8655替代TLD5190  AEC-Q100合格 −设备环境温度&#xff1a; -40C≤TA≤125C −器件结温&#xff1a; -40C≤TJ≤150C  工作输入电压4.5V至55V&#xff0c;启动电压降至4.5V  在各种条件下效率都很高&#xff0c;高达96%  3%LED电流精度  高侧PMOS调…

15.2 zookeeper java client

15.2 zookeeper java client 1. Zookeeper官方1.1 依赖1.2 Zookeeper客户端连接测试1.3 Zookeeper节点操作1.3.1 zooKeeper.create创建节点1.3.2 zooKeeper.exists获取节点详情1.3.3 zooKeeper.getData获取节点数据1.3.4 zooKeeper.getChildren获取节点下所有子节点名称1.3.5 …

使用“阿里云人工智能平台 PAI”制作数字人

体验 阿里云人工智能平台 PAI PAI-DSW免费试用 https://free.aliyun.com/?spm5176.14066474.J_5834642020.5.7b34754cmRbYhg&productCodelearn https://help.aliyun.com/document_detail/2261126.html 体验PAI-DSW https://help.aliyun.com/document_detail/2261126.…

SAP S/4HANA(2024)云迁移指南 - 避免常见陷阱,优化转型项目

由于2027年是停止维护传统SAP系统的截止期限&#xff0c;越来越多的IT企业专注于将他们的ERP迁移到云端。他们越来越多地看到SAP新的SAP S/4HANA平台在生成式人工智能和其他创新方面为组织提供的机会。 在企业资源规划&#xff08;ERP&#xff09;领域&#xff0c;SAP长期以来一…

背景音乐怎么提取出来?3种方法一看就会

背景音乐怎么提取出来&#xff1f;提取背景音乐是一个相对简单且高效的过程&#xff0c;它让我们能够轻松地从视频或音频文件中分离出所需的音乐元素。无论是为了创作新的音乐作品、制作视频配乐&#xff0c;还是仅仅为了欣赏纯音乐&#xff0c;提取背景音乐都为我们提供了极大…

多态、接口、类练习题

代码&#xff1a; public static void main(String[] args) {Person2 personnew Person2("唐僧",new Horse());person.passRiver();person.onRoad();} 接口&#xff1a; interface Vehicles{public void work(); } lass Horse implements Vehicles{Overridepubli…

有了《米小圈日记魔法》,学习写作就是这么轻松!

在数字化和信息快速更迭的当下&#xff0c;孩子们的学习方式也在经历着剧变。传统的教育模式逐渐被各种富有创意和互动性的教学工具所取代。作为家长&#xff0c;我们常常会面临如何有效引导孩子学习&#xff0c;特别是培养他们的写作能力这一问题。在我看来&#xff0c;《米小…

惊爆!苹果 AI 的首批体验震撼登场!Siri 发生了天翻地覆的变化,其 AI 写作能力更是瞬间碾压大批应用!

&#x1f431; 个人主页&#xff1a;TechCodeAI启航&#xff0c;公众号&#xff1a;TechCodeAI &#x1f64b;‍♂️ 作者简介&#xff1a;2020参加工作&#xff0c;专注于前端各领域技术&#xff0c;共同学习共同进步&#xff0c;一起加油呀&#xff01; &#x1f4ab; 优质专…

SpringBoot+Vue+kkFileView实现文档管理(文档上传、下载、在线预览)

场景 SpringBootVueOpenOffice实现文档管理(文档上传、下载、在线预览)&#xff1a; SpringBootVueOpenOffice实现文档管理(文档上传、下载、在线预览)_霸道流氓气质的博客-CSDN博客_vue openoffice 上面在使用OpenOffice实现doc、excel、ppt等文档的管理和预览。 除此之外…

项目管理中的关键:进度管理

项目管理中&#xff0c;进度管理无疑占据了举足轻重的地位&#xff0c;它不仅关乎项目能否按时完成&#xff0c;更是衡量项目效率、成本控制及质量保障的重要标尺。 它要求管理者根据项目的总体目标&#xff0c;科学合理地制定项目进度计划&#xff0c;并在项目实施过程中进行…