一句代码生成rgba随机颜色
本帖最后由 马黑黑 于 2024-5-16 12:14 编辑 <br /><br /><style>.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
#mydiv { margin: 20px auto; display: grid; place-items: center; width: 400px; height: 200px; border: 1px solid gray; position: relative; }
#outMsg { padding: 10px 20px; background: #eee; width: fit-content; border-radius: 20px; }
</style>
<h2>代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><span class="tBlue">var</span> mkRgba = (r,g,b,a) => `rgba(${.map(x => <span class="tRed">Math</span>.round(<span class="tRed">Math</span>.random() * (x >= 0 ? x : 255)))},${a ? a : <span class="tRed">Math</span>.random().toFixed(2)})`;</cl-cd>
</div>
<p><br></p>
<h2>函数解释：</h2>
<p><br></p>
<p>四个参数中，使用 map 内置函数迭代前三个参数 r、g、b，使之生成rgb三原色随机代码，期间判断参数值是否大于等于0，符合条件使用该参数数值否则使用 255，然后对之取随机数；alpha通道值则依据参数是否配置，若配置使用该配置作为不透明度数值、若不配置使用0~1的随机数（去2位小数点）。函数可以不传参，这将得到rgb都随机、a也随机的颜色，传参则应至少传完rgb三个参数。传参可灵活定制颜色范围，比方说想要红色系的随机颜色，可这样处理：mkRgba(255, 0, 0, .9)。</p>
<h2>应用实例</h2>
<div id="mydiv"><p id="outMsg"></p></div>
<h2>示例代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"> #mydiv { <span class="tBlue">margin:</span> 20px auto; <span class="tBlue">display:</span> grid; <span class="tBlue">place-items:</span> center; <span class="tBlue">width:</span> 400px; <span class="tBlue">height:</span> 200px; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3"> #outMsg { <span class="tBlue">padding:</span> 10px 20px; <span class="tBlue">background:</span> #eee; <span class="tBlue">width:</span> fit-content; <span class="tBlue">border-radius:</span> 20px; }</cl-cd>
<cl-cd data-idx="4"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="5"> </cl-cd>
<cl-cd data-idx="6"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"mydiv"</span>><<span class="tDarkRed">p</span> <span class="tRed">id</span>=<span class="tMagenta">"outMsg"</span>><<span class="tDarkRed">/p</span>><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="7"> </cl-cd>
<cl-cd data-idx="8"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="9"> <span class="tBlue">var</span> mkRgba = (r,g,b,a) => `rgba(${.map(x => <span class="tRed">Math</span>.round(<span class="tRed">Math</span>.random() * (x >= 0 ? x : 255)))},${a ? a : <span class="tRed">Math</span>.random().toFixed(2)})`;</cl-cd>
<cl-cd data-idx="10"> mydiv.onclick = () => outMsg.innerText = mydiv.style.background = mkRgba();</cl-cd>
<cl-cd data-idx="11"> mydiv.click();</cl-cd>
<cl-cd data-idx="12"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
<script>
var mkRgba = (r,g,b,a) => `rgba(${.map(x => Math.round(Math.random() * (x >= 0 ? x : 255)))},${a ? a : Math.random().toFixed(2)})`;
mydiv.onclick = () => outMsg.innerText = mydiv.style.background = mkRgba();
mydiv.click();
</script>
本帖最后由 马黑黑 于 2024-5-16 18:36 编辑
红影 发表于 2024-5-16 14:09
一句代码就能生成rgba随机颜色，这个太厉害了。
虽然“map 内置函数迭代前三个参数 r、g、b”不 ...
map，作为JS内置函数，它的作用就是对数组元素进行迭代，在遍历数组元素时通过引用函数对数组元素进行处理，最后将处理返回一个新的数组。看下面的示例：
let ar1 = ; //声明数组 ar1 并赋值
//下面声明数组 ar2，ar2 通过 map 迭代 ar1 并计算出数组元素与自身的乘积然后赋值给 ar2
let ar2 = ar1.map( x => x * x);
console.log(ar1); // - ar1 不被改变
console.log(ar2); // - ar2 是 ar1 迭代出来的新数组
上例，map 迭代数组 ar1 的时候，它引用的函数因为简单直接写在 map 迭代语句里，x => x * x，x 代表数组元素自身，=> 表示箭头函数，x * x 是函数运算的内容。写成普通函数可以是酱紫：
function count(n) {
return n * n;
}
或用箭头函数：
let count = (n) => n * n;
然后 ar2 的赋值语句写成：
let ar2 = ar1.map(x => count(x));
使用独立函数后的完整代码：
let count = (n) => n * n;
let ar1 = ;
let ar2 = ar1.map(x => count(x));
console.log(ar1);
console.log(ar2);
这个加了透明度，颜色比之前更浅一点 传参可灵活定制颜色范围，比方说想要红色系的随机颜色，可这样处理：mkRgba(255, 0, 0, .9)。
试了这句，还没试成{:4_170:} 南无月 发表于 2024-5-16 12:46
传参可灵活定制颜色范围，比方说想要红色系的随机颜色，可这样处理：mkRgba(255, 0, 0, .9)。
试了这句， ...
你就拿 255, 0, 0, .9 作为传参放到实例代码的 mkRgba() 括号里
马黑黑 发表于 2024-5-16 13:11
你就拿 255, 0, 0, .9 作为传参放到实例代码的 mkRgba() 括号里
嗯嗯，把mydiv.style.background = mkRgba();括号里换成红色，就只在红色范围里流转了。绿色也一样，把255和后面的0换个位置。只是这样的透明度是固定的了，不再是随机的。 一句代码就能生成rgba随机颜色，这个太厉害了。{:4_199:}
虽然“map 内置函数迭代前三个参数 r、g、b”不太好懂，但至少能实现一句就能变色了。 传参还可以配置两个，255, 0, 255, .9，然后去感受设定情况下的颜色变化，真有趣{:4_187:} 红影 发表于 2024-5-16 14:13
传参还可以配置两个，255, 0, 255, .9，然后去感受设定情况下的颜色变化，真有趣
是这么设计的 马黑黑 发表于 2024-5-16 13:11
你就拿 255, 0, 0, .9 作为传参放到实例代码的 mkRgba() 括号里
实例代码。。{:4_170:}
我的错 南无月 发表于 2024-5-16 20:12
实例代码。。
我的错
函数的调用，如果有返回值，你只要要声明一个变量去获取它。参考下面的例子：
let add = (a, b, c) => a + b + c; // 把三个数相加的函数
let res = add(20, 13, 6); //调用 add 函数 并赋值给 res 变量
console.log(res); //把 res 即运算结果打印到控制台 马黑黑 发表于 2024-5-16 21:00
函数的调用，如果有返回值，你只要要声明一个变量去获取它。参考下面的例子：
let add = (a, b, c) => ...
好哒，我就说老师的代码怎么可能试不出来。原来还是我的错{:4_173:} 南无月 发表于 2024-5-16 21:05
好哒，我就说老师的代码怎么可能试不出来。原来还是我的错
对JS还不太熟 马黑黑 发表于 2024-5-16 21:00
函数的调用，如果有返回值，你只要要声明一个变量去获取它。参考下面的例子：
let add = (a, b, c) => ...
先规定好了ADD,它就会很靠谱的执行{:4_173:}这就是一个小型编程呗 南无月 发表于 2024-5-16 21:07
先规定好了ADD,它就会很靠谱的执行这就是一个小型编程呗
就是几个数相加，多少个就要多少个参数 马黑黑 发表于 2024-5-16 21:06
对JS还不太熟
我的政策么，就是不熟不要紧{:4_170:} 马黑黑 发表于 2024-5-16 21:07
就是几个数相加，多少个就要多少个参数
这个听明白了{:4_173:} 马黑黑 发表于 2024-5-16 18:15
是这么设计的
去试了半天，感受颜色的变化。 马黑黑 发表于 2024-5-16 18:28
map，作为JS内置函数，它的作用就是对数组元素进行迭代，在遍历数组元素时通过引用函数对数组元素进行处 ...
谢谢黑黑的详细解答，现在看明白了。“x 代表数组元素自身”，开始时对x时什么不知道，对map也不清楚呢。{:4_204:} 红影 发表于 2024-5-16 21:38
谢谢黑黑的详细解答，现在看明白了。“x 代表数组元素自身”，开始时对x时什么不知道，对map也不清楚呢。 ...
x 是参数，下面两个表达方法是等价的：
x => ...
function(x) {}