原理先知: 使用background:rgb(r,g,b),三原色色值指定方式设置div的背景颜色,其中 r , g , b , 三个颜色值随机取到。
补充: RGB颜色模型是主要用于使用光的显示技术的颜色模型。在该模型中,红色(R),绿色(G)和蓝色(B)的颜色以不同的强度加在一起,以在现代视频显示屏上产生数百万种不同的颜色。
样式设置:
html,body { height: 100%;}
div { height: 100%;background-color: black;}
PS:这里初始,设置样式,让div铺满整个屏幕。便于观察。
页面内容:
<div id="test"><button id="btn">点我</button></div>
PS:div里放置一个按钮
逻辑实现
// 1. API => Math.random():产生 0 ~ 1 之间的随机数;
var div = document.querySelector("div");
btn.onclick = function () {
// console.log(Math.random());
// rgb rgb(0~255,0~255,0~255);
// 每次Math.random调用都会产生全新的随机数;
var r = parseInt(256 * Math.random()); //小于 255 254.xxxxxx
var g = parseInt(256 * Math.random());
var b = parseInt(256 * Math.random()); // 随机颜色 ; => 字符串;
var random_color = "rgb(" + r + "," + g + "," + b + ")";
// 把随机颜色赋值给body元素;body给id=”body”
// 元素.style.cssText = 字符串;
// 给元素的行内样式设置为 => 字符串;
console.log(r, g, b);
console.log(random_color);
div.style.cssText = "background:" + random_color;
};
效果图示