首页 > 其他分享 >一句JS代码,实现随机颜色的生成

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

时间:2024-08-02 09:27:08浏览次数:16  
标签:颜色 16 代码 JS 随机 randomColor 生成 Math

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

 

标签:颜色,16,代码,JS,随机,randomColor,生成,Math
From: https://blog.csdn.net/Blusher1/article/details/140819877

相关文章

  • Git同步两个远程仓库的分支代码
    背景:有两个项目A、B【在不同的代码仓库】,B是基于A开发的,经过一定时间的迭代,B有了一些定制化功能,现在要把B项目定制化功能都同步到项目A。同步两个远程仓库的分支代码最终是同步两个分支的代码。在同一个仓库,同步代码就是同步不同分支代码。一般就通过rebase操作即可。同步......
  • 代码随想录算法训练营第二十五天|134. 加油站、135. 分发糖果、860.柠檬水找零、406.
    写代码的第二十五天继续贪心!!gogogo!134.加油站思路贪心算法总让我有种脑子知道每次怎么计算,但是写不出来,也想不出贪心贪在哪里了,就只是觉得应该这么做。。。。。本题中大家可以按照自己的计算方法一步一步模拟一下这个过程,然后会发现其实每次都是要计算每站剩余的油量,......
  • 代码随想录算法训练营第二十六天|452. 用最少数量的箭引爆气球、435. 无重叠区间、763
    写代码的第二十六天继续贪心贪心!!!452.用最少数量的箭引爆气球思路最少的弓箭引爆气球,那么就是要看有没有重复覆盖的区域,如果有的话,那么一个弓箭就能引爆重复区域的气球,所以本题就是要看有多少气球是重复的,如果重复就用一根弓箭,如果不重复就加一。解决问题1:如何判断是否......
  • 代码随想录算法训练营第二十七天| 56. 合并区间、738.单调递增的数字
    写代码的第二十七天最后一天贪心!!!加油呀!!!56.合并区间思路这道题本质上和昨天的两道题是几乎完全一致的,都是判断重叠区间,只不过昨天的射箭那道题是统计有多少重叠区间,无重叠区间那道题是找到重叠区间然后删除,这道题是找到重叠区间然后合并。解决问题1:如何对重叠区间进行......
  • 【python的语法特点,如注释规则、代码缩进、编写规范等】
    介绍一下python的语法特点,如注释规则、代码缩进、编写规范等Python是一种广泛使用的高级编程语言,以其简洁易读的语法、丰富的标准库和强大的第三方库而闻名。下面我将详细介绍Python的一些基本语法特点,包括注释规则、代码缩进、以及编写规范等。一、注释规则Python......
  • 15. 序列化模块json和pickle、os模块
    1.序列化模块 1.1序列化与反序列化(1)序列化将原本的python数据类型字典、列表、元组转换成json格式字符串的过程就叫序列化(2)反序列化将json格式字符串转换成python数据类型字典、列表、元组的过程就叫反序列化(3)为什么要序列化计算机文件中没有字典这种数据类型,将字典中......
  • 右下角wifi图案点击无可用wifi/更新网卡驱动时遇到错误代码56的解决办法
    1.问题如下图所示,我这里遇到明明有wifi,但是无法检索到任何有用wifi的情况。2.解决方法参考:电脑WIFI消失,网卡驱动Intel(R)Wi-Fi6AX201160MHz感叹号报错解决方案集合——无线WI-FI功能缺失,Intel(R)Wi-Fi6AX201160MHz异常,驱动更新错误2.1问题原因当时更新驱动更到......
  • 写个统计代码量的小工具
    源代码:https://gitee.com/qianqiu-10000/statistical.git1.首先有个方法可以判断一行代码属于注释还是代码1.1输入一行字符串1.2去掉前后空字符1.3如果当前处在多行注释状态,直接跳过一些判断,多行注释+1,然后判断是否结束多行注释1.4如果没有处在多行注释状态,一点点判断1.......
  • 「代码随想录算法训练营」第二十六天 | 贪心算法 part4
    452.用最少数量的箭引爆气球题目链接:https://leetcode.cn/problems/minimum-number-of-arrows-to-burst-balloons/题目难度:中等文章讲解:https://programmercarl.com/0452.用最少数量的箭引爆气球.html视频讲解:https://www.bilibili.com/video/BV1SA41167xe题目状态:有点思路......
  • js reduce 根据sku属性生成sku
    如何使用JavaScript中的reduce函数来生成SKU属性的SKU。SKU(StockKeepingUnit)通常用于唯一标识商品或库存。假设你有一个包含商品属性的数组,例如:constproperties=[{name:'颜色',value:'红色'},{name:'尺寸',value:'XL'},{name:'材质',valu......