十六进制随机颜色百变球

马黑黑 发表于 2022-3-27 08:47

马黑黑 发表于 2022-3-27 08:52

<p>全部代码：<br><br></p>

<pre style='margin: auto; padding: 10px; width: 98%; background: #f5f5f5; box-shadow: 2px 2px 2px #ccc; border-radius: 6px;'>

<style type=<span style='color: magenta'>"text/css"</span>>
<span style='color: red;'>.myBall </span>{
<span style='color: blue;'>   margin</span>: 10px auto 0;
<span style='color: blue;'>   width</span>: 300px;
<span style='color: blue;'>   height</span>: 300px;
<span style='color: blue;'>   border-radius</span>: 50%;
<span style='color: blue;'>   background</span>: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}
</style>

<<span style='color:darkred'>div</span> <span style='color: red'>class</span><span style='color: blue'>=</span><span style='color: magenta'>"myBall"</span>><<span style='color: darkred'>/div</span>>

<script language=<span style='color: magenta'>"javascript"</span>>
setInterval(<span style='color: blue'>function</span>() {
   <span style='color: blue'>let</span> c1 = `#${Math.random().toString(16).substr(-6)}`;
   <span style='color: blue'>let</span> c2 = `#${Math.random().toString(16).substr(-6)}`;
   <span style='color: red'>document</span>.querySelector(<span style='color: magenta'>'.myBall'</span>).style.background = `linear-gradient(120deg, ${c1} 0%, ${c2} 100%)`;
}, 2000);
</script>

</pre>

马黑黑 发表于 2022-3-27 09:33

本帖最后由马黑黑于 2022-3-27 09:44 编辑

代码解释：
HTML代码简单，仅一个独立的节点：<div class="myBall"></div>

CSS中，需要解释的仅一个地方，背景色设置：

background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);

这是线性渐变，角度120deg，两个颜色，颜色停止位置一个设为0%，一个设为100%，效果就出来了。简单的。

下面重点说说JS部分的代码，简短但富含能量：

setInterval(function() {
let c1 = `#${Math.random().toString(16).substr(-6)}`;
let c2 = `#${Math.random().toString(16).substr(-6)}`;
document.querySelector('.myBall').style.background = `linear-gradient(120deg, ${c1} 0%, ${c2} 100%)`;
}, 2000);

用setInterval定时器每两秒钟驱动圆球盒子的渐变背景色，定时器的语句应该能看懂吧？

定时器匿名函数中，我们声明两个变量，c1 和 c2，两个变量的作用都是获得十六进制随机色的，语句一模一样，因为用了 Math.random() 数学方法，每变量虽然几乎同时获取随机数，但得到的结果不同。

下面详细讲讲十六进制颜色随机获取的语句。

首先是新的知识点，反单引号的妙用。拼接字串，用反单引号是进入HTML5时代之后的JS新增方法，它的语法结构为：

`实体字符串 ${变量或算式} 实体字符串`

这样的方式将字符串和变量（也可以是算式）拼接起来，可读性更友好。ps：反单引号的输入方法：英文小角输入状态下，按键盘左上角自上而下的第二字键位，在数字键1的左边。

第二是 Math.random() 伪随机数，它返回 0~1（包含0但不包含1）的浮点数值。

第三，toString() 函数，将东东转变为字符串的意思。但 toString(16/32/64) 有特别含义，文档的说明不好理解，其意大概是将指定的 16 位带符号整数的值转换为其等效的字符串表示形式。例子里，Math.random().toString(16)，是将Math.random生成的浮点随机数转换成16进制的值，会得出15个已变成了字符串值的16进制数值（为什么不是16位数值？好比十进制，十进制不会出现10，到9就进位了）。

第四，我们还用了 substr(-6) 语句，substr() 是JS内置的截取字符串的函数，-6 参数的意思是倒着截取，也就是说从右到左截取随机生成的16进制数值中的六个数。这六个数跟前边的 # 号拼接起来，就是十六进制的颜色，例如：#65ac8a .

最后，我们每隔两秒钟设置一下div盒子的背景颜色为线性渐变的：

document.querySelector('.myBall').style.background = `linear-gradient(120deg, ${c1} 0%, ${c2} 100%)`;

这里，我们用了 querySelector() 方法获得第一个 class 为 myBall 的盒子操作句柄，这也是HTML5时代新增的JS方法。接着，再一次使用反单引号拼接字串与变量来定义盒子的渐变背景色。

能读到这里的将会是高手。就酱。

红影发表于 2022-3-27 10:42

“反单引号的输入方法：英文小角输入状态下，按键盘左上角自上而下的第二字键位，在数字键1的左边。”
黑黑讲得真细致，你不说我还真不知道反单引号在哪呢{:4_187:}

马黑黑 发表于 2022-3-27 10:43

红影发表于 2022-3-27 10:42
“反单引号的输入方法：英文小角输入状态下，按键盘左上角自上而下的第二字键位，在数字键1的左边。”
黑 ...

它在tab键的上方，经常用到的

红影发表于 2022-3-27 10:46

“Math.random().toString(16)，是将Math.random生成的浮点随机数转换成16进制的值，会得出15个已变成了字符串值的16进制数值”

为什么要用十六进制的？十进制的应该也能取到后六位数值啊。

红影发表于 2022-3-27 10:47

红影发表于 2022-3-27 10:46
“Math.random().toString(16)，是将Math.random生成的浮点随机数转换成16进制的值，会得出15个已变成了字 ...

十六进制是为了让颜色的取得更丰富吧？毕竟有足足16个数字，16取6比10取6有更多组合吧。不知理解得对不对。

马黑黑 发表于 2022-3-27 10:48

红影发表于 2022-3-27 10:46
“Math.random().toString(16)，是将Math.random生成的浮点随机数转换成16进制的值，会得出15个已变成了字 ...

十进制得不到 abcde 的，这类颜色：

#20cca69

是十六进制。

红影发表于 2022-3-27 10:49

原来十六进制的颜色也能做随机色，还以为只有RGB颜色可以呢。
现在只剩下英文名的颜色了，不知道这个颜色能否做随机变色。{:4_173:}

马黑黑 发表于 2022-3-27 10:51

红影发表于 2022-3-27 10:49
原来十六进制的颜色也能做随机色，还以为只有RGB颜色可以呢。
现在只剩下英文名的颜色了，不知道这个颜色 ...

英文名也可以，得建立一个庞大的数组，一般不这样做，除非少量几种颜色的变化可以考虑。再说，英文的颜色名称囊括不了所有的颜色，也不是好的选择。

红影发表于 2022-3-27 11:08

马黑黑发表于 2022-3-27 10:48
十进制得不到 abcde 的，这类颜色：

#20cca69

石榴进制还能得到字母啊，这个没想到。还以为都是数字呢{:4_173:}

红影发表于 2022-3-27 11:09

刚刚一下子忘记RGB变色在哪个个帖子里，翻了一下，想起来了，原来是那个钟
背景与时钟的关系：为什么
https://www.huachaowang.com/forum.php?mod=viewthread&tid=58053&fromuid=2
(出处: 花潮论坛)

红影发表于 2022-3-27 11:12

把两JS对照着看看：
十六进制的：

setInterval(function() {
let c1 = `#${Math.random().toString(16).substr(-6)}`;
let c2 = `#${Math.random().toString(16).substr(-6)}`;
document.querySelector('.myBall').style.background = `linear-gradient(120deg, ${c1} 0%, ${c2} 100%)`;
}, 2000);

RGB的：

setInterval(function() {
   var r = Math.floor(Math.random() * 256),
            g = Math.floor(Math.random() * 256),
            b = Math.floor(Math.random() * 256),
            bgColor = "rgba(" + r + "," + b + "," + b + ", .6)";
            console.log(bgColor);
   document.getElementById('wai').style.backgroundColor = bgColor;
}, 2000);

马黑黑 发表于 2022-3-27 11:46

rgb的这一句

console.log(bgColor);

是测试用，可以删掉

马黑黑 发表于 2022-3-27 11:48

红影发表于 2022-3-27 11:08
石榴进制还能得到字母啊，这个没想到。还以为都是数字呢

也是数字，只是16进制要用到abcdef着6个字母来标记9以后的数

红影发表于 2022-3-27 13:25

马黑黑发表于 2022-3-27 10:43
它在tab键的上方，经常用到的

我一般用它的中文状态，比如蝶恋花·无题{:4_173:}

红影发表于 2022-3-27 13:27

马黑黑发表于 2022-3-27 11:46
rgb的这一句

console.log(bgColor);

嗯嗯，知道了。

红影发表于 2022-3-27 13:28

马黑黑发表于 2022-3-27 10:51
英文名也可以，得建立一个庞大的数组，一般不这样做，除非少量几种颜色的变化可以考虑。再说，英文的颜色 ...

通过这个几个帖子，对颜色代码有更多的了解了。

红影发表于 2022-3-27 13:29

马黑黑发表于 2022-3-27 11:48
也是数字，只是16进制要用到abcdef着6个字母来标记9以后的数

对十六进制一点不了解，原来里面有字母的呢。

马黑黑 发表于 2022-3-27 13:42

红影发表于 2022-3-27 13:29
对十六进制一点不了解，原来里面有字母的呢。

二进制只有0和1，八进制0到7，十进制0到9，十进制以上的计数方法都会用到十进制阿拉伯数字以外的东东来做标记

页: [1] 2

花潮论坛's Archiver

十六进制随机颜色百变球