如何让元素自动变换背景色
本帖最后由 马黑黑 于 2022-5-3 08:02 编辑本帖需要一个前提：我们已有一个 div 盒子，在CSS里设定了尺寸，它的HTML结构如下：
<div class="myBox"></div>
我们已经知道如何使用CSS设置元素的背景色，用的属性是 background 或 background-color ：
background: #ccc; 或者 background-color: #ccc;
但要令元素在指定时间内自动更换背景色，CSS做不到，这时候就需要请出交互功能强大的脚本语言 JavaScript，简称 JS，用它内置的定时器 setInterval 函数为我们定时更改指定元素的背景色。setInterval函数用法举例如下：
setInterval(任务, 1000);
其中，参数任务指要做的事情，比如更改背景色，1000是时间间隔，1000毫秒之意。酱紫，我们就给 setInterval 定时器分派了一个任务，定时器每隔1秒钟就会自动去执行这个任务，直到人为终止它。而任务，可以通过一个自定义函数来完成，这里假设我们已有一个自定义函数 setColor()，则 setInterval 接收任务的语句改为：
setInterval(setColor, 1000);
注意，setColor() 作为一个函数，调用时本来是不能丢掉小括号的，但 setInterval 任性，要弃掉小括号，否则情况会变得有些复杂（这里避开不谈）。
酱紫，我们还得编写 setColor() 函数，它要针对指定元素从事改变背景色的工作：
function setColor() {
let cc = `#${Math.random().toString(16).substr(-6)}`; //获得十六进制随机颜色
document.querySelector('.myBox').style.background = cc;
}
获取16进制随机颜色用了好几个JS内置的函数与方法，暂时不用理解其含义，这里只需要知道 cc 变量得到一个类似于 #ffcc00 的结果，它是随机的结果，每次都不同。然后这个颜色赋值给第一个HTML文档中类名为 myBox 的盒子，有多个同类名的盒子时，也只有第一个会变色。
下面的代码针对上文编写，我们给出三个同类名div盒子，便于观察 querySelector 获得的是第几个同类名盒子的操作句柄：
<style>
.myBox {
width: 200px;
height: 100px;
background: #ccc;
padding: 10px;
margin: 10px;
}
</style>
<div class="myBox">第一个myBox盒子</div>
<div class="myBox">第二个myBox盒子</div>
<div class="myBox">第三个myBox盒子</div>
<script>
setInterval(setColor, 1000);
function setColor() {
let cc = `#${Math.random().toString(16).substr(-6)}`; //获得十六进制随机颜色
document.querySelector('.myBox').style.background = cc;
}
</script>
一楼，我们成功驱动了第一个 class 名为 .myBox 的盒子自动变色，但每一次变色都是单一的背景色，观感略显单调。所以，接下来，我们用渐变背景色去改变元素的背景外观，获得更为丰富的色彩变化。我们以线性渐变 linear-gradient() 属性为例，它的极简语句如下：
linear-gradient(颜色一，颜色二);
它要应用于 background 或 background-image 属性才能令元素设置线性渐变背景：
background: linear-gradient(颜色一，颜色二);
或
background-image: linear-gradient(颜色一，颜色二);
此属性至少需要两个颜色参数，为了方便随机颜色的调取，我们再设定一个自定义函数 getColor()，用于获得随机十六进制颜色：
function getColor() {
return `#${Math.random().toString(16).substr(-6)}`;
}
函数很简单：return 是 JS 内置方法，返回一个值的意思，这里，返回一个类似于 #cc9988 的字符串，换言之就是将十六进制的颜色字串传递出去。
下面，配套改进一下一楼的 setColor() 函数：
function setColor() {
let myBox = document.querySelector('.myBox');
myBox.style.background = `linear-gradient(${getColor()}, ${getColor()})`;
}
将来我们会反复操作盒子的相关属性，所以干脆声明一个操作句柄变量 myBox，免得每次都得写长长的一串 document.querySelector('.myBox')，如果需要在多个函数用到它，我们甚至可以把这个变量写在全过程的格局里。
然后我们在 setColor() 函数里给 myBox 设置渐变背景色，借助反引号 ``，我们的语句变成极简，用 ${} 表达JS的东东，如函数、变量、算式等等，在此分别获取两次随机颜色，${} 以外的均为平时CSS里的表达语句。
以下是完整代码：
<style>
.myBox {
width: 200px;
height: 100px;
background: #ccc;
padding: 10px;
margin: 10px;
}
</style>
<div class="myBox">第一个myBox盒子</div>
<div class="myBox">第二个myBox盒子</div>
<div class="myBox">第三个myBox盒子</div>
<script>
setInterval(setColor, 1000);
function setColor() {
let myBox = document.querySelector('.myBox');
myBox.style.background = `linear-gradient(${getColor()}, ${getColor()})`;
}
function getColor() {
return `#${Math.random().toString(16).substr(-6)}`;
}
</script>
在二楼，我们实现了盒子定时变换渐变背景的功能，但只针对第一个同类名盒子，另外两个盒子好歹也是兄弟，为啥它们不能拥有相同的功能？
嗯，公平公正理念要倡导和践行。
那么，这就需要讲讲新的知识点—— document.querySelectorAll() 内置函数和数组相关的东东：
document.querySelectorAll，顾名思义，它能查询（query）到全部的同类名元素并返回数组结构的值，语句用法与 document.querySelector 一样：
let myBox = document.querySelectorAll('.myBox');
此时，myBox 变量得到的值是一个数组，第一个对应的盒子写成 myBox，第二个是 myBox，第N个盒子写成 myBox。设置第N个盒子的背景色则写成：
myBox.style.background = "linear-gradient(pink, red)";
一个一个地写上述语句，显然麻烦，所以，我们用一个 for 语句来实现：
for(j=0; j<myBox.length; j++) {
myBox.style.background = `linear-gradient(${getColor()}, ${getColor()})`;
}
其中，myBox.length 是数组长度，数组长度说的是构成数组的成员总数。
如此，所以同类名元素都能各自展开精彩的变色之旅，公平公正的法律理念在JS+CSS加持的H5世界里得以彰显：
<style>
.myBox {
width: 200px;
height: 100px;
background: #ccc;
padding: 10px;
margin: 10px;
}
</style>
<div class="myBox">第一个myBox盒子</div>
<div class="myBox">第二个myBox盒子</div>
<div class="myBox">第三个myBox盒子</div>
<script>
setInterval(setColor, 1000);
function setColor() {
let myBox = document.querySelectorAll('.myBox');
for(j=0; j<myBox.length; j++) {
myBox.style.background = `linear-gradient(${getColor()}, ${getColor()})`;
}
}
function getColor() {
return `#${Math.random().toString(16).substr(-6)}`;
}
</script>
马黑黑 发表于 2022-5-3 08:56
在二楼，我们实现了盒子定时变换渐变背景的功能，但只针对第一个同类名盒子，另外两个盒子好歹也是兄弟，为 ...
这个去本地试验了一下，还是第一个盒子变色的啊。 谢谢黑黑，知道怎样让那个相框花瓣变色了，真好{:4_187:} 先看了这个帖子，再去看那个旋转花瓣关联音乐的帖子。借这个帖子去修改了一下相框花瓣，也让花瓣变色了，但语句可能有问题，我发出来给黑黑看看{:4_173:}
<style>
.mama {
margin: auto;
width: 80px;
height: 80px;
position: relative;
}
.flower {
width: 48px;
height: 56px;
left: 50%;
border-radius: 0 100%;
transform-origin: 0 240%;
position: absolute;
}
</style>
<div class="mama"></div>
<script>
let mama = document.querySelector('.mama');
chgc();
let cc = setInterval(chgc, 1000);
function chgc(){
let str = '';
for(j=0; j< 24; j++) {
let c1 = `#${Math.random().toString(16).substr(-6)}`;
let c2 = `#${Math.random().toString(16).substr(-6)}`;
str += `<div class='flower' style='background-image: linear-gradient(${c1}, ${c2});
transform: rotate(${15*j}deg);'></div>`;
}
mama.innerHTML = str;}
</script> 红影 发表于 2022-5-3 09:38
先看了这个帖子，再去看那个旋转花瓣关联音乐的帖子。借这个帖子去修改了一下相框花瓣，也让花瓣变色了，但 ...
7楼不是能变色了么 红影 发表于 2022-5-3 09:30
这个去本地试验了一下，还是第一个盒子变色的啊。
一楼的代码：变背景色
二楼的代码：变渐变背景色
以上都是针对第一个盒子
三楼才是三兄弟一同变建变背景色 来学习 马黑黑 发表于 2022-5-3 10:04
7楼不是能变色了么
是的，效果一样，能变色就好{:4_187:} 马黑黑 发表于 2022-5-3 10:07
一楼的代码：变背景色
二楼的代码：变渐变背景色
嗯嗯，估计我试验错了{:4_173:} 红影 发表于 2022-5-4 08:10
嗯嗯，估计我试验错了
没关系的。可能也是你急于追求实现完整功能的实现，但要记住一个道理，路是一步一步走的 红影 发表于 2022-5-4 08:09
是的，效果一样，能变色就好
原理在那里，可以实现的，希望记下这些实现方式 马黑黑 发表于 2022-5-4 08:34
没关系的。可能也是你急于追求实现完整功能的实现，但要记住一个道理，路是一步一步走的
嗯嗯，打好基础才是根本。 马黑黑 发表于 2022-5-4 08:35
原理在那里，可以实现的，希望记下这些实现方式
做过帖子，代码就留下了啊，不会丢的{:4_173:} 红影 发表于 2022-5-4 22:38
做过帖子，代码就留下了啊，不会丢的
还是要做做笔记，有印象笔记不错的，可以免费使用，交钱也只是一个月8元 马黑黑 发表于 2022-5-4 22:40
还是要做做笔记，有印象笔记不错的，可以免费使用，交钱也只是一个月8元
哦哦，我做笔记都是留在本地的，没事也能翻翻的。 红影 发表于 2022-5-5 10:41
哦哦，我做笔记都是留在本地的，没事也能翻翻的。
印象笔记也是留在本地的，有网络的时候它会使用网络长传备份。 马黑黑 发表于 2022-5-5 12:47
印象笔记也是留在本地的，有网络的时候它会使用网络长传备份。
嗯，存网络上更好，这样即使电脑忽然坏了，东西也不会丢。
页:
[1]
2