给一个div盒子,设置好样式
#box {
width: 300px;
height: 300px;
background-color: skyblue;
margin: auto;
}
<div id="box"> </div>
获取id为box的div盒子节点
const box = document.getElementById("box");
使用定时器控制div盒子背景颜色
let a, b, c;
setInterval(function() {
let style = box.style.backgroundColor = "rgb(" + a + "," + b + "," + c + ")";//使用"+ +",进行插入a,b,c变量值改变rgb颜色里面3个值
console.log(style);//测试打印box里面背景颜色rgb值是否改变
a = Math.floor(Math.random() * 255);//使用向下取整对生成随机数变为整数,颜色rgb的值范围0~255,所以随机数取到0~255
b = Math.floor(Math.random() * 255);
c = Math.floor(Math.random() * 255);
}, 1000);
效果图如下: