JS：随机生成十六进制颜色值
<style>#mydiv {
margin: 40px 0;
width: 200px;
height: 200px;
border: 1px solid purple;
position: relative;
}
#mydiv::after {
position: absolute;
content: attr(data-c);
top: -30px;
}
</style>
<div id="mydiv" data-c="颜色"></div>
<p><button id="btn" type="button" value="1">生成随机16进制颜色</button></p>
<script>
btn.onclick = () => {
let c = '#' + Math.random().toString(16).substring(2,8);
mydiv.style.background = c;
mydiv.dataset.c = '颜色 : ' + c;
}
</script>
本帖最后由 马黑黑 于 2023-7-8 08:54 编辑
生成随机16进制颜色值的方法不止一种，这里介绍相对简洁的做法，其实就一行代码解决问题：
let c = '#' + Math.random().toString(16).substring(2,8);
上句，变量 c 的值就是一个标准的十六进制颜色，运行效果请参照一楼里的演示。以下是对生成颜色的语句进行分析：
① 十六进制颜色首先需要 # 做前缀，# 是一个字符，所以用小角引号将其包裹起来；
② Math 是 JS 内置对象，头一个字母必须大写。Math.random() 生成一个小于1的浮点数，例如，0.09958032823855723 和 0.9637592126804668 等。Math.random() 可能会得到0，但概率极低；
③ toString() 是 JS 内置方法，将数字转换成字符，该方法加入参数值 16 ，即 toString(16)，表示将步骤 ② Math.random() 生成的浮点数转换为十六进制，得到类似这样的结果，0.f6b8ec7bae6a9；
④ 将步骤 ③ 得到的结果截取6个十六进制数字，就可大功告成。截取方法很多，这里使用 JS 内置的处理字符串的 substring () 方法，该方法需要两个参数，参数一是字节索引，从 0 开始，0 是第一个字节的索引；参数二是截取的结束位置的字节索引，注意，它表示到此处但不包含此处，所以，本例中的第二个参数是8。
【提示】比 substring() 方法更简单的是 substr() 方法，substr(-6) 可以替代本例语句的 substring(2,8) ，它是从步骤 ③ 的结果中从后往前截取6个数字。
醉美水芙蓉 发表于 2023-7-8 09:07
老师今天休息？好早呀！
周末
马黑黑 发表于 2023-7-8 08:20
生成随机16进制颜色值的方法不止一种，这里介绍相对简洁的做法，其实就一行代码解决问题：
let c =...
substr(-6)是从后往前截取6个数字，你的新帖斗转星移就是使用个这个方法{:4_173:} 这个真好，点击就能得到颜色，而且上面还有颜色代码。
真是巧了，随手点的几下看到的颜色都是喜欢的{:4_173:} 红影 发表于 2023-7-8 09:55
这个真好，点击就能得到颜色，而且上面还有颜色代码。
真是巧了，随手点的几下看到的颜色都是喜欢的{:4_17 ...
颜色是随机的，手气好得到好的颜色 红影 发表于 2023-7-8 09:54
substr(-6)是从后往前截取6个数字，你的新帖斗转星移就是使用个这个方法
以前的16进制随机颜色一直用 substr(-6) 方法 马黑黑 发表于 2023-7-8 09:56
颜色是随机的，手气好得到好的颜色
是啊，所以我是好手气呢{:4_173:} 马黑黑 发表于 2023-7-8 09:57
以前的16进制随机颜色一直用 substr(-6) 方法
是的，substring(2,8) 很少见到。两者效果一样吧。 红影 发表于 2023-7-8 11:40
是的，substring(2,8) 很少见到。两者效果一样吧。
一样。substring 是比较正式的，substr 官方建议不要使用，不过程序员们一直都在使用 红影 发表于 2023-7-8 11:39
是啊，所以我是好手气呢
经常洗手，手气就好 马黑黑 发表于 2023-7-8 08:20
生成随机16进制颜色值的方法不止一种，这里介绍相对简洁的做法，其实就一行代码解决问题：
let c =...
生——转——截。。{:4_187:}太神奇了 思路神奇，代码也神奇，结果更神奇 南无月 发表于 2023-7-8 13:07
思路神奇，代码也神奇，结果更神奇
通水吧的路千万条，哪条好走走哪条 南无月 发表于 2023-7-8 13:06
生——转——截。。太神奇了
JS就是这么了得，关键是你要懂得去分配任务给它 马黑黑 发表于 2023-7-8 13:10
通水吧的路千万条，哪条好走走哪条
通往高级水吧的只有这么一条{:4_170:} 马黑黑 发表于 2023-7-8 13:10
JS就是这么了得，关键是你要懂得去分配任务给它
现在不敢说懂，可能估计大概自我觉得正在懂的路上。。{:4_170:} 马黑黑 发表于 2023-7-8 11:44
一样。substring 是比较正式的，substr 官方建议不要使用，不过程序员们一直都在使用
貌似那个数据很大吧，取前面的比取后面的更节约内存点？{:4_173:} 马黑黑 发表于 2023-7-8 11:44
经常洗手，手气就好
我都不敢再点了，前面点出那么多漂亮颜色，我怕再点就没那么好看的了{:4_173:}