如何让元素自动变换背景色

马黑黑 · 发表于 2022-5-3 07:54

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 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>

复制代码

马黑黑 · 发表于 2022-5-3 08:37

一楼，我们成功驱动了第一个 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>

复制代码

马黑黑 · 发表于 2022-5-3 08:56

在二楼，我们实现了盒子定时变换渐变背景的功能，但只针对第一个同类名盒子，另外两个盒子好歹也是兄弟，为啥它们不能拥有相同的功能？

嗯，公平公正理念要倡导和践行。

那么，这就需要讲讲新的知识点—— document.querySelectorAll() 内置函数和数组相关的东东：

document.querySelectorAll，顾名思义，它能查询（query）到全部的同类名元素并返回数组结构的值，语句用法与 document.querySelector 一样：

let myBox = document.querySelectorAll('.myBox');

此时，myBox 变量得到的值是一个数组，第一个对应的盒子写成 myBox[0]，第二个是 myBox[1]，第N个盒子写成 myBox[n]。设置第N个盒子的背景色则写成：

myBox[n].style.background = "linear-gradient(pink, red)";

一个一个地写上述语句，显然麻烦，所以，我们用一个 for 语句来实现：

for(j=0; j<myBox.length; j++) {
myBox[j].style.background = `linear-gradient(${getColor()}, ${getColor()})`;
}

其中，myBox.length 是数组长度，数组长度说的是构成数组的成员总数。

如此，所以同类名元素都能各自展开精彩的变色之旅，公平公正的法律理念在JS+CSS加持的H5世界里得以彰显：