CSS中,<div>元素是最常用的容器。它可以用来包裹其他元素,将它们放在同一个区域内。但是,它也可以变得更加有趣。有时候,我们希望页面上的某些元素可以随机变换颜色。这个时
CSS中,
<div>元素是最常用的容器。它可以用来包裹其他元素,将它们放在同一个区域内。但是,它也可以变得更加有趣。
有时候,我们希望页面上的某些元素可以随机变换颜色。这个时候,我们可以使用CSS中的background-color
属性,结合JavaScript的Math.random()
函数来实现。
/* HTML */ <div id="box"></div> /* CSS */ #box { width: 100px; height: 100px; background-color: teal; } /* JavaScript */ var box = document.getElementById("box"); function randomColor() { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); var color = "rgb(" + r + "," + g + "," + b + ")"; return color; } setInterval(function() { box.style.backgroundColor = randomColor(); }, 1000);
在上面的代码中,我们首先定义了一个<div>
元素,它的background-color
属性初始值为teal。
接着,我们使用JavaScript中的setInterval()
函数,每秒钟随机更换一次background-color
的值。
在randomColor()
函数中,我们使用了Math.random()
函数和Math.floor()
函数来获取三个随机数(r、g、b),并将它们拼接成一个rgb颜色字符串。
最后,我们将随机生成的颜色值赋给了<div>
元素的background-color
属性。
通过这种方式,<div>
元素的背景色会不断变换,形成一个有趣的效果。
粉丝
0
关注
0
收藏
0