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

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

news 文章来源：https://blog.csdn.net/Blusher1/article/details/140819877 2025/2/6 23:29:50

今天我们只用 一句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>

 

相关文章：

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

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

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

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

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

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

char类型和int类型

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

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

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

stl中的比较最大最小操作 一、概述二、最小值1. min2. min_element 三、最大值1. max2. max_element 四、混合1. minmax2. minmax_element 一、概述 记录这里C11中常用的最小值和最大值的比较函数&#xff0c;最好的参考资料其实就是 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排序的概念 排序&#xff1a;排列或排序是将一组数据按照一定的规则或顺序重新组织的过程&#xff0c;数据既可以被组织成递增顺序&#xff08;升序&#xff09;&#xff0c;或者递减顺序&#xff08;降序&#xff09;。稳定性&#xff1a;假定在待…...

编程日记 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是引用类型&#xff0c;多个引用类型变量的值会互相影响。存储在堆&#xff08;heap&#xff09;上 2、结构体struct是值类型&#xff0c;多个值类型变量的值不会互相影响。存储在栈&#xff08;stack&#xff09;上 类结构关键字classstruct类型引用类型值类型存储…...

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

【RabbitMQ】RabbitMQ持久化

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

java环境配置与tomcat的配置

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

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

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

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

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

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

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

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

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

&#x1f984;个人主页:小米里的大麦-CSDN博客 &#x1f38f;所属专栏:https://blog.csdn.net/huangcancan666/category_12718530.html &#x1f381;代码托管:黄灿灿 (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实现课程检索

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

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

经典运维面试题

1、Linux常见的日志文件都有哪些&#xff0c;各自的用途&#xff1f;日志轮询配置文件在哪里&#xff1f;欢迎界面配置文件在哪里&#xff1f; /var/log/messages #内核及公共消息日志/var/log/cron #计划任务日志/var/log/dmesg #系统引导日志/var/log/malilog #邮件系…...

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

别再盲目推广了！Xinstall助你开启App线下推广新篇章

在这个数字化飞速发展的时代&#xff0c;App已经成为我们生活中不可或缺的一部分。然而&#xff0c;App市场的竞争也日益激烈&#xff0c;如何让你的App在众多竞争者中脱颖而出&#xff0c;成为每个推广者必须面对的问题。今天&#xff0c;就让我们一起探讨一下App线下推广的痛…...

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

大厂linux面试题攻略五之数据库管理

一、数据库管理-MySQL语句 0.MySQL基本语句&#xff1a; 1.SQL语句-增 创建xxx用户&#xff1a; mysql>create user xxx % indentified by 123456; xxx表示用户名 %b表示该用户用来连接数据库的方式&#xff08;远程或本地连接&#xff09; indentified by 123456设置密码…...

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

【pytorch】模型集成

在集成学习中&#xff0c;我们会训练多个模型&#xff08;通常称为「弱学习器」&#xff09;解决相同的问题&#xff0c;并将它们结合起来以获得更好的结果。最重要的假设是&#xff1a;当弱模型被正确组合时&#xff0c;我们可以得到更精确和/或更鲁棒的模型。 常用的模型集成…...

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

初识集合和数据结构

目录 初识集合框架数据结构基本概念和术语数据数据元素数据项数据对象前四者的关系数据结构逻辑结构和物理结构逻辑结构物理结构 算法算法设计要求 初识集合框架 Java的集合框架也可被称为容器&#xff0c;是定义在Java.util包下的一些接口和实现类。其就是将多个元素存储到一…...

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

cocos creator 3.x中动态加载 resources 文件夹下的图片时提示找不到

文件目录如下 类型为spriteFrame 代码案例 图片设置为 sprite-frame、texture 或其他图片类型后&#xff0c;将会在 资源管理器 中生成一个对应类型的资源。但如果直接加载 equipments/testea&#xff0c;得到的类型将会是 ImageAsset&#xff0c;必须指定路径到具体的子资源…...

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

第九十八周周报

学习时间&#xff1a; 2024.7.27-204.8.3 学习产出&#xff1a; 这周主要在按照审稿人的意见修改论文&#xff0c;由于有个模型保存的文件找不到了&#xff0c;所以重新训练花了点时间&#xff0c;目前已经把修改后的论文和cover letter发给杨老师了。...

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

程序员找工作之数据结构面试题总结分析

文章目录 1. 数据结构的基本概念与分类2. 数据结构的存储与表示3. 数据元素的存储与关系4. 存储结构的选择与考量5. 特定数据结构的定义与特性6. 数据结构操作与应用7. 数组与存储8. 特定数据结构的存储与访问 程序员在找工作面试中&#xff0c;数据结构方面可能会被问到的问题…...

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

设置provider解决maven找不到JUnit 5测试样例

问题描述 尝试复现一个用大模型生成测试样例的工作&#xff0c;但使用maven生成的JUnit 5测试样例死活不执行。又不想用命令行运行&#xff0c;因此进行排查 基本知识 <dependencies> junit-jupiter-api JUnit 5写代码时调用的库 junit-jupyter-engine 运行JUnit 5测…...

编程日记 2024/8/4 1:59:16

php反序列化靶机serial实战

扫描ip,找到靶机ip后进入 他说这是cookie的测试网页&#xff0c;我们抓个包&#xff0c;得到cookie值 base64解码 扫描一下靶机ip的目录 发现http://192.168.88.153/backup/&#xff0c;访问 下载一下发现是他的网页源码 通过代码审计&#xff0c;发现 通过代码审计得知&…...

编程日记 2024/8/4 1:58:15

专业做食材网站/有哪些网站可以免费推广

&#x1f4a5; 项目专栏&#xff1a;【Python实现经典机器学习算法】附代码原理介绍 文章目录前言一、Agagrad优化原理二、更新规则三、迭代过程四、代码实践前言 &#x1f451; 最近粉丝群中很多朋友私信咨询一些决策树、逻辑回归等机器学习相关的编程问题&#xff0c;为了能更…...

编程日记 2025/2/6 21:47:27

网站拉圈圈接口怎么做/制作网站大概多少钱

网上找到的资料&#xff0c;对我现在非常有用&#xff0c;现转到这里做备忘一、通过mii-tool指令[rootlinuxzgf ~]# mii-tool//mii-tool主要是用于配置网卡工作模式的指令&#xff0c;同时也可以进行查询、监控等工作&#xff01;二、ethtool[rootlinuxzgf ~]# ethtool eth0Set…...

编程日记 2025/2/6 17:50:47

建站行业前景/内容营销是什么意思

转自&#xff1a;简书 冯雅杰 做到这一点&#xff0c;你也可以成为优秀的程序员 作为一个程序员&#xff0c;我经常会问自己一个问题&#xff1a; 优秀的程序员都具备哪些特质&#xff1f; 我总结过很多特质&#xff0c;例如&#xff1a; 有解决问题的能力有独立思考的能力有好…...

编程日记 2025/2/6 15:31:26

龙岗网/seo外包方案

假设按照升序排序的数组在预先未知的某个点上进行了旋转。 ( 例如&#xff0c;数组 [0,0,1,2,2,5,6] 可能变为 [2,5,6,0,0,1,2] )。 编写一个函数来判断给定的目标值是否存在于数组中。若存在返回 true&#xff0c;否则返回 false。 示例 1: 输入: nums [2&#xff0c;5&…...

编程日记 2025/2/6 12:31:30

哪个网站可以免费做网页/软文推广策划方案

时间日期处理类&#xff08;Date类&#xff0c;Calendat类&#xff09; 在Java中获取当前时间&#xff0c;可以使用java.util.Date类和java.util.Calendar类完成。其中&#xff0c;Date类主要封装了系统的日期和时间的信息&#xff0c;Calendar类则会根据系统的日历来解释Date…...

编程日记 2025/2/6 11:34:50

广州白云区公司注册/seo搜索引擎优化是做什么的

aptitude aptHow to find the history of updated packages by apt-get or aptitude?如何通过apt -get或aptitude查找更新软件包的历史记录&#xff1f; The history is in log files of dpkg and apt:历史记录在dpkg和apt的日志文件中&#xff1a; /var/log/dpkg.log /var/…...

编程日记 2025/2/6 10:19:13