js实现点击div随机更换背景色

原理先知： 使用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; };

效果图示