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

一句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>

 

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 力扣面试(五)
  • esp8266初始化卡在1的原因
  • CentOS通过rsync实现文件同步(daemon方式)
  • 【HDFS】HADOOP-11552.Allow handoff on the server side for RPC requests
  • Yarn UI 时间问题,相差8小时
  • AI测试:人工智能模型的核心测试指标,分类判别、目标检测、图像分割、定量计算分别有哪些指标?
  • 昇思25天学习打卡营第12天 |昇思MindSpore 基于 MindSpore 通过 GPT 实现情感分类
  • CANoe:System Variables模块介绍
  • 只有IP地址没有域名怎么实现HTTPS访问?
  • 自动问答之白嫖文心一言大模型
  • 卡拉OK歌唱比赛活动策划方案
  • 使用flutter做圆形进度条 (桌面端)
  • PicInsight - 制作精美的明信片! | 限时免费
  • 成都云飞浩容文化传媒有限公司领航电商新纪元
  • URL重写
  • (ckeditor+ckfinder用法)Jquery,js获取ckeditor值
  • 【node学习】协程
  • ➹使用webpack配置多页面应用(MPA)
  • android百种动画侧滑库、步骤视图、TextView效果、社交、搜房、K线图等源码
  • conda常用的命令
  • egg(89)--egg之redis的发布和订阅
  • Hibernate【inverse和cascade属性】知识要点
  • java B2B2C 源码多租户电子商城系统-Kafka基本使用介绍
  • JavaScript中的对象个人分享
  • JAVA并发编程--1.基础概念
  • laravel5.5 视图共享数据
  • node-sass 安装卡在 node scripts/install.js 解决办法
  • PermissionScope Swift4 兼容问题
  • Python连接Oracle
  • Shell编程
  • 从零开始在ubuntu上搭建node开发环境
  • 高性能JavaScript阅读简记(三)
  • 基于MaxCompute打造轻盈的人人车移动端数据平台
  • 使用docker-compose进行多节点部署
  • 使用权重正则化较少模型过拟合
  • 推荐一个React的管理后台框架
  • RDS-Mysql 物理备份恢复到本地数据库上
  • 长三角G60科创走廊智能驾驶产业联盟揭牌成立,近80家企业助力智能驾驶行业发展 ...
  • ​Benvista PhotoZoom Pro 9.0.4新功能介绍
  • #if等命令的学习
  • (+3)1.3敏捷宣言与敏捷过程的特点
  • (c语言)strcpy函数用法
  • (C语言)深入理解指针2之野指针与传值与传址与assert断言
  • (每日一问)设计模式:设计模式的原则与分类——如何提升代码质量?
  • (三)模仿学习-Action数据的模仿
  • (实测可用)(3)Git的使用——RT Thread Stdio添加的软件包,github与gitee冲突造成无法上传文件到gitee
  • .java 9 找不到符号_java找不到符号
  • .NET CORE 3.1 集成JWT鉴权和授权2
  • .net core webapi 部署iis_一键部署VS插件:让.NET开发者更幸福
  • .Net 垃圾回收机制原理(二)
  • .NET 使用 XPath 来读写 XML 文件
  • .NET框架类在ASP.NET中的使用(2) ——QA
  • .Net下C#针对Excel开发控件汇总(ClosedXML,EPPlus,NPOI)
  • /usr/bin/env: node: No such file or directory
  • ??如何把JavaScript脚本中的参数传到java代码段中