写了一个自动变颜色的小案例

最新推荐文章于 2023-03-20 20:22:04 发布
最新推荐文章于 2023-03-20 20:22:04 发布
阅读量223 收藏 1
点赞数 2
分类专栏： js 文章标签： html javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lv_SFeng/article/details/107696625
版权

两层三剩三的div小方块里随机改变颜色。如下图所示：
小案例的截图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动变颜色</title>
    <style>
        #div-wrap {
            width: 310px;
            height: 310px;
        }
        .div1 {
            width: 100px;
            height: 100px;
            border: 1px solid #eeeeee;
            float: left;
        }
        .div2 {
            width: 31.33px;
            height: 31.33px;
            border: 1px solid #eeeeee;
            float: left;
        }

    </style>
</head>
<body>
    <div id="div-wrap">
        <div class="div1">
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
        </div>
        <div class="div1">
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
        </div>
        <div class="div1">
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
        </div>
        <div class="div1">
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
        </div>
        <div class="div1">
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
        </div>
        <div class="div1">
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
        </div>
        <div class="div1">
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
        </div>
        <div class="div1">
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
        </div>
        <div class="div1">
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
            <div class="div2"></div>
        </div>
    </div>
    <button onclick="stop()">停止</button>
    <button onclick="start()">启动</button>
</body>

<script>
    //这个是整体改变背景色的代码
    /*var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    var div1 = document.getElementsByClassName("div1");
    var div2 = document.getElementsByClassName("div2")
    for (let i = 0; i < div1.length; i++) {
        for (let j = 0; j < div2.length; j++) {
            div2[j].style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
        }
    }*/

    //获取div集合
    var div1 = document.getElementsByClassName("div1");
    var div2 = document.getElementsByClassName("div2")
    //设置定时器，定时改变div的背景色
    var bgc = setInterval(function () {
        for (let i = 0; i < div1.length; i++) {
            for (let j = 0; j < div2.length; j++) {
                let r = Math.floor(Math.random() * 255);
                let g = Math.floor(Math.random() * 255);
                let b = Math.floor(Math.random() * 255);
                let a = Math.random()
                div2[j].style.backgroundColor = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
            }
        }
    }, 1000)
    
    //停止改变颜色
    function stop() {
        clearInterval(bgc);
    }
    //重新启动改变颜色
    function start() {
        var bgc = setInterval(function () {
            for (let i = 0; i < div1.length; i++) {
                for (let j = 0; j < div2.length; j++) {
                    let r = Math.floor(Math.random() * 255);
                    let g = Math.floor(Math.random() * 255);
                    let b = Math.floor(Math.random() * 255);
                    let a = Math.random()
                    div2[j].style.backgroundColor = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
                }
            }
        }, 1000)
    }

</script>
</html>
Lv_SFeng
关注
专栏目录
定时器---div颜色渐变
jifubu6013的博客
03-26 795
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; div{width: 500px; height: 500px; background-color: pink;} &lt;/style&gt; &
自动变色的小程序（点击可停止变色也可显示当前颜色的16进制数）
W1365966490的专栏
12-04 909
JS控制按钮自动切换背景颜色，可暂停 .grigg{ position:relative; font-family:Verdana; font-size:16px;color:#ffffff; } y=" "; function colourWrite(){ y=document.bgColor;  if (document.layers)   {x=documen
【微信小程序】计算器案例
m0_55394328的博客
03-05 7750
嗨嗨嗨，好久没更新小程序专栏了，本期浅浅用小程序写一个计算器。最终代码会上传至资源噢~以上就是今天的学习内容啦~如果有兴趣的话可以订阅专栏，持续更新呢~咱们下期再见~
【微信小程序】基础篇 -- 页面事件 - 上拉触底 - 案例（二十七）
JMFive的博客
03-07 7508
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第27篇文章;今天开始学习微信小程序的第15天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
前端vue单个按钮点击选中前后颜色变化案例
m0_49714202的博客
04-15 2927
首页 下面代码在html引入的vue方法都一样 代码如下 直接引用html看效果即可如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title></title> &
用C语言写一个查单词的小demo
热门推荐
m0_47068593的博客
07-03 4万+
用C语言写一个查单词的小demo #include <stdio.h> #include <string.h> #include <stdlib.h> int main(int argc, const char *argv[]) { // 用只读的方式打开我们的单词库 FILE *fp = fopen("dict.txt","r"); if (NULL == fp){ perror("fopen"); return -1
微信小程序案例---本地生活
浅陌繁星的博客
11-02 5669
微信小程序案例---本地生活
表格颜色自动隔行变色
11-15
"表格颜色自动隔行变色"是一种常见的美化技巧，它可以使表格看起来更清晰、更易读，帮助用户快速区分不同行的数据。这个功能在Excel、WPS表格、Google Sheets等常见表格软件中都有提供。下面我们将深入探讨这一主题...
微信小程序 73个案例
01-02
最后，“涂鸦”小程序可能是一个轻量级的绘画工具，展示了如何在小程序中实现画布操作、颜色选择和保存画作等功能。 这些案例覆盖了微信小程序开发的多个方面，包括但不限于数据管理、用户交互、网络请求、媒体处理...
使用Matlab和Arduino基于颜色识别设计了一个简单的自动货物装卸机器人原型.zip
03-18
附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
这里是一个简单的前端开发案例
最新发布
06-01
至于"这里是一个简单的前端开发案例.txt"这个文件，它可能包含了项目的代码示例、步骤说明或是问题解决方案。通常，文本文件在编程项目中用来记录代码注释、配置信息或教程内容。要深入理解这个案例，我们需要打开这...
自动售货机、电梯、红绿灯应用案例
03-31
总结来说，自动售货机、电梯、红绿灯这些应用案例都涵盖了电气自动化领域的诸多基本技术和概念，它们的运行和控制涉及到了传感器技术、执行机构、PLC控制、人机界面以及安全保护技术等多个方面。随着相关技术的不断...
【微信小程序】基础篇 -- 案例 - 自定义 tabBar（四十六）
JMFive的博客
03-20 1万+
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第46篇文章;今天开始学习微信小程序的第28天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。前面已经介绍了分包-独立分包 & 分包预下载，通过栗子学习了如何设置独立分包以及分包预下载。
第二个JSP实战案例之——自动刷新时间
m0_62404144的博客
03-26 2993
该程序实现的是： 1.编写一个JSP程序实现手表的功能，显示当前时间，并实时自动刷新时间 2.置中 3.字体大 4.字体颜色绿色 在这里我用三种方法实现 方法一： <%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %> <html&...
使用JS中的定时器实现块元素背景颜色淡入和淡出的效果
weixin_43338566的博客
04-16 862
效果展示： HTML代码如下： <body> <div id="div1"></div> </body> CSS代码如下： #div1{ width: 200px; height: 200px; background-color: red; /* 兼容ie6 */ /* filter: alpha(op...
opencv 自动驾驶案例
09-06
以下是一个基于OpenCV的自动驾驶案例： 1. 车道线检测：使用OpenCV库中的图像处理技术，可以检测和跟踪道路上的车道线。这可以通过颜色过滤、边缘检测和霍夫变换等技术实现。通过分析车道线的位置和方向，可以帮助...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值