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

最新推荐文章于 2022-08-30 23:32:20 发布

原创最新推荐文章于 2022-08-30 23:32:20 发布 · 3.7k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#js #css #html #javascript

JavaScript 同时被 3 个专栏收录

33 篇文章

订阅专栏

HTML5

8 篇文章

订阅专栏

CSS

6 篇文章

订阅专栏

本文介绍了一种使用JavaScript和CSS动态更改div背景颜色的方法。通过随机生成RGB颜色值，每次点击按钮时，div的背景色将变为一种新的随机颜色。这涉及到对HTML、CSS和JavaScript的理解，展示了如何在网页上实现互动效果。

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