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

最新推荐文章于 2022-11-29 17:55:19 发布

你的玄烨

最新推荐文章于 2022-11-29 17:55:19 发布

阅读量3.5k

点赞数 1

分类专栏： CSS HTML5 JavaScript 文章标签： js css html javascript

本文链接：https://blog.csdn.net/CCQStudy/article/details/107105160

版权

JavaScript 同时被 3 个专栏收录

33 篇文章 1 订阅

订阅专栏

HTML5

8 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

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