当前位置：首页 > news >正文

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

news 2026/5/12 5:37:42

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

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

实现此效果的JS函数：

let randomColor = () => ...: 定义一个箭头函数randomColor，用于生成一个随机颜色。
- Math.random(): 生成一个0到1之间的随机数。
- Math.random() * 0xffffff: 将这个随机数乘以0xffffff（即16777215，这是16进制表示的最大值），得到一个0到16777215之间的随机整数。
- Math.floor(...): 对上述结果进行向下取整，确保得到的是一个整数。
- .toString(16): 将这个整数转换为16进制字符串。
- `#${...}`: 将16进制字符串包裹在#符号中，形成CSS颜色代码的格式。
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>

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

今天我们只用一句JS代码，实现随机颜色的生成，首先看一下效果： 每次刷新浏览器背景颜色都不一样实现此效果的JS函数 ： let randomColor () > ...: 定义一个箭头函数randomColor，用于生成一个随机颜色。 Math.ra…...

编程日记 2024/8/4 2:36:57

校园抢课助手【7】-抢课接口限流

在上一节中，该接口已经接受过风控的处理，过滤掉了机器人脚本请求，剩下都是人为的下单请求。为了防止用户短时间内高频率点击抢课链接，海量请求造成服务器过载，这里使用接口限流算法。先介绍下几种常用的接口限流策略…...

编程日记 2024/8/4 2:33:55

char类型和int类型

一、char类型在Java中，char（字符）类型用于表示单个字符，它是基本数据类型之一。以下是关于Java中char类型的一些重要信息： 表示方式： char类型用于存储Unicode字符，占用16位（即2个字…...

编程日记 2024/8/4 2:31:53

C++参悟：stl中的比较最大最小操作

stl中的比较最大最小操作一、概述二、最小值1. min2. min_element 三、最大值1. max2. max_element 四、混合1. minmax2. minmax_element 一、概述记录这里C11中常用的最小值和最大值的比较函数，最好的参考资料其实就是 https://zh.cppreference.com 最重要的查…...

编程日记 2024/8/4 2:30:52

JAVA读取netCdf文件并绘制热力图

读取netCdf的依赖 <dependency><groupId>ucar</groupId><artifactId>netcdfAll</artifactId><version>5.5.3</version><scope>system</scope><exclusions><exclusion><groupId>org.slf4j</groupId…...

编程日记 2024/8/4 2:29:51

数据结构——八大排序

一.排序的概念和其应用 1.1排序的概念排序：排列或排序是将一组数据按照一定的规则或顺序重新组织的过程，数据既可以被组织成递增顺序（升序），或者递减顺序（降序）。稳定性：假定在待…...

编程日记 2024/8/4 2:27:49

【Unity】RPG2D龙城纷争（十九）流程与UI界面（终章）

更新日期：2024年8月1日。项目源码：第五章发布（正式开始游戏逻辑的章节）索引简介一、游戏流程1.初始化流程2.开始流程3.关卡流程4.关卡结束流程5.启用所有流程二、UI界面逻辑1.开始界面2.存档界面3.关卡界面DataRegion 数据显示逻辑区域RoundRegion 回合逻辑区域RoleMenu…...

编程日记 2024/8/4 2:26:48

C#类和结构体的区别

1、类class是引用类型，多个引用类型变量的值会互相影响。存储在堆（heap）上 2、结构体struct是值类型，多个值类型变量的值不会互相影响。存储在栈（stack）上类结构关键字classstruct类型引用类型值类型存储…...

编程日记 2024/8/4 2:25:47

【RabbitMQ】RabbitMQ持久化

一、简介 RabbitMQ的持久化机制是一种确保数据在RabbitMQ服务重启或异常情况下不会丢失的重要特性。RabbitMQ的持久化主要包括三个方面的内容：交换器的持久化、队列的持久化、消息的持久化。二、交换器的持久化 1、实现方式在RabbitMQ中，实现交换器…...

编程日记 2024/8/4 2:23:44

算法刷题笔记 Kruskal算法求最小生成树（详细算法介绍，详细注释C++代码实现）

文章目录题目描述基本思路实现代码题目描述给定一个n个点m条边的无向图，图中可能存在重边和自环，边权可能为负数。求最小生成树的树边权重之和，如果最小生成树不存在则输出impossible。最小生成树的概念：给定一张边带权的无向…...

编程日记 2024/8/4 2:22:43

5年经验的软件测试人员，碰到这样的面试题居然会心虚......

我们这边最近的面试机会比较多，但是根据他们的反馈，结束后大部分都没音信了，因为现在企业面试问的非常多，范围非常广，而且开放性的问题很多，很多人即便面试前刷了成百上千道面试题，也很难碰到一…...

编程日记 2024/8/4 2:20:41

C#进阶-轻量级ORM框架Dapper的使用教程与原理详解

本文详细介绍了Dapper在C#中的使用方法，包括Dapper的基本概念、与其他持久层框架的比较、基本语法和高级语法的使用，并通过实例讲解了如何在项目中集成和使用Dapper。Dapper以其高效的性能和简洁的API受到开发者的青睐，适用于各种数据库操作需…...

编程日记 2024/8/4 2:19:39

Windows图形界面(GUI)-MFC-C/C++ - 编辑框(Edit Control) - CEdit

公开视频 -> 链接点击跳转公开课程博客首页 -> 链接点击跳转博客主页目录编辑框(Edit Control) - CEdit 基本概念成员函数示例代码编辑框(Edit Control) - CEdit 基本概念编辑框（Edit Control）是一个允许用户输入和编辑文本的窗…...

编程日记 2024/8/4 2:18:38

网络安全防御【IPsec VPN搭建】

目录一、实验拓扑图二、实验要求三、实验思路四、实验步骤： 修改双机热备的为主备模式： 2、配置交换机LSW6新增的配置： 3、防火墙（FW4）做相关的基础配置： 4、搭建IPsec VPN通道 （1…...

编程日记 2024/8/4 2:17:37

java环境配置与tomcat的配置

1、java环境配置一、JDK下载访问Oracle官网： 前往Oracle官网（Oracle | Cloud Applications and Cloud Platform），在首页的顶部菜单中选择“Resources” > “Downloads” > “Java” > “JDK”。注意：Orac…...

编程日记 2024/8/4 2:16:36

OD C卷 - 来自异国的客人/幸运数字

来自异国的客人/幸运数字（100） 输入描述： 输入k,n,m k表示物品价值（十进制） k>0 n表示幸运数字, n > 0 m表示异国采用的进制；m > 1 n < m 输出描述： 输出幸运数字的个数&#xff0…...

编程日记 2024/8/4 2:15:34

C++ | 动态内存管理 new、delete (用法、底层)详解

目录简单回顾C语言动态内存管理 new、delete的用法内置类型 new delete 自定义类型 new、delete底层讲解（重要） operator new 与 operator delete 定位 new 结语简单回顾C语言动态内存管理在C语言的学习阶段我们接触到了三个能在堆上开辟…...

编程日记 2024/8/4 2:14:33

【C语言】结构体内存布局解析——字节对齐

🦄个人主页:小米里的大麦-CSDN博客 🎏所属专栏:https://blog.csdn.net/huangcancan666/category_12718530.html 🎁代码托管:黄灿灿 (huang-cancan-xbc) - Gitee.com ⚙️操作环境:Visual Studio 2022 目录一、引言二、什么是字节对齐&…...

编程日记 2024/8/4 2:13:32

模型表达方式

目录一、模型表达概述二、模型精确表达 2.1 几何表示 (Geometrical Representation) 三、模型非精确表达 3.1 网格表示 (Mesh Representation) 3.2 体素表示 (Voxel Representation) 一、模型表达概述模型的表达方式多种多样，选择适合的表达方式取决于具体应用场景和…...

编程日记 2024/8/4 2:12:31

校园课程助手【4】-使用Elasticsearch实现课程检索

本节将介绍本项目的查询模块，使用Elasticsearch又不是查询接口，具体流程如图所示（如果不了解Elasticsearch可以使用sql语句进行查询）： 这里是两种方法的异同点： Mysql：擅长事务类型操作&#…...

编程日记 2024/8/4 2:10:29

边缘AI实战：从医疗到零售的系统级挑战与软硬件协同设计

1. 项目概述：当AI走出云端，走进现实“边缘AI”这个词，现在听起来可能已经不新鲜了，但真正把它从概念变成手边可用的工具，甚至是一个能独立决策的“小脑”，这个过程里踩过的坑、绕过的弯，可能比想…...

编程新知 2026/5/12 5:25:41

黑莓印相≠复古滤镜！基于CIE Lab色域分析的Midjourney色彩空间偏移校准方案（附Python验证脚本）

更多请点击： https://intelliparadigm.com 第一章：黑莓印相≠复古滤镜！基于CIE Lab色域分析的Midjourney色彩空间偏移校准方案（附Python验证脚本） 黑莓印相（Blackberry Print Tone）常被误认为是…...

编程新知 2026/5/12 5:20:51

十分钟速通：GO、KEGG、COG注释与富集分析的实战指南

1. 从测序数据到功能注释的快速通道刚拿到高通量测序数据的同学，面对海量基因序列时总会陷入迷茫：这些基因到底有什么功能？它们参与了哪些生物过程？这时候GO、KEGG和COG三大注释工具就是你的"基因翻译官"。我处理过上百…...

编程新知 2026/5/12 5:04:02

从阿里天池金融风控赛看实战：用XGBoost搞定贷款违约预测的完整流程与避坑指南

金融风控实战：XGBoost在贷款违约预测中的全流程解析金融风控领域的机器学习应用正变得越来越普及，尤其是在贷款违约预测这一核心场景中。天池等数据竞赛平台为从业者提供了宝贵的实战演练机会，但如何将比赛经验转化为真实业务能力&#xff0…...

编程新知 2026/5/12 4:39:16

20 - 告别“无限上下文”的幻觉：大模型知识注入的“四层矩阵”与下一场权重战争

本专题系列文章共 21 篇，前 5 篇限时免费阅读 01 - 眩晕时代的定海神针：大模型落地的“第一性原理”与算力丰裕悖论 02 - 95%的AI投资打了水漂：五大错配如何扼杀你的“第二增长曲线” 03 - 从电力到AI：标准化已死，个性化永生——大模型时代的三大商业终局 04 - 你的护城…...

编程新知 2026/5/12 4:22:59

手把手教你用Simulink搭建BUCK电路：从主电路到PID整定的保姆级流程

手把手教你用Simulink搭建BUCK电路：从主电路到PID整定的保姆级流程电力电子技术作为现代能源转换的核心，BUCK电路因其高效的降压特性被广泛应用于电源设计领域。对于初学者而言，理论知识与实际仿真之间往往存在一道难以跨越的鸿沟——明明理…...

编程新知 2026/5/12 0:13:53

ncmdump工具完全攻略：解锁网易云音乐NCM格式转换的终极指南

ncmdump工具完全攻略：解锁网易云音乐NCM格式转换的终极指南【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为网易云音乐下载的NCM加密格式无法在其他播放器播放而烦恼吗？你是否经历过精心收藏的音乐只能…...

编程新知 2026/5/11 23:45:23