html结合JavaScript制作的霓虹灯

最新推荐文章于 2023-11-07 23:59:25 发布

土豆烧鸡盖浇饭

最新推荐文章于 2023-11-07 23:59:25 发布

阅读量590

点赞数 1

文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_43108668/article/details/82708373

版权

这里写代码片<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>霓虹灯</title>
    <style>
        div{
            border: 1px solid #000000;/*设置一个黑色的边框 边框的像素为1*/
            position: absolute;/*定位*/
            margin: auto;/*设置浏览器的边距*/
            left: 0;/*左边的边距设置为0*/
            top: 0;/*上边的边距设置为0*/
            right: 0;/*右边的边距设置为0*/
            bottom: 0;/*下边的边距设置为0*/
        }
        /*调用ID边框div01，设置最外边的边框长和高为600像素，
        后面的每一个边框是上面的边框减掉50像素*/
        #div01{
            width: 600px;
            height: 600px;
        }
        #div02{
            width: 550px;
            height: 550px;
        }
        #div03{
            width: 500px;
            height: 500px;
        }
        #div04{
            width: 450px;
            height: 450px;
        }
        #div05{
            width: 400px;
            height: 400px;
        }
        #div06{
            width: 350px;
            height: 350px;
        }
        #div07{
            width: 300px;
            height: 300px;
        }
        #div08{
            width: 250px;
            height: 250px;
        }
        #div09{
            width: 200px;
            height: 200px;
        }
        #div10{
            width: 150px;
            height: 150px;
        }
        #div11{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>

<div id="div01"><!--设置边框的ID为div01-->
    <div id="div02"><!--设置边框的ID为div02-->
        <div id="div03"><!--设置边框的ID为div03-->
            <div id="div04">
                <div id="div05">
                    <div id="div06">
                        <div id="div07">
                            <div id="div08">
                                <div id="div09">
                                    <div id="div10">
                                        <div id="div11">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--JavaScript（Java脚本）代码的实现-->
<script>
    //定义数组实现（id的数组，颜色的数组）
    ## 第一种方式单色跑一轮换色 ##

    var arrayDivId=["div01","div02","div03","div04","div05","div06","div07","div08","div09","div10","div11"];
    var arrayColor=["#00EE00","#050505","#0000AA","#1C86EE","#4B0082","#54FF9F","#66CDAA","#F08080","#FAFAFA","#FFFF00","#FF3030","#000000"];
    var i=11;
    var random=Math.floor(Math.random()*arrayColor.length);
    function fun() {
        i--;
        if(i<1){
            i=11;
            random=Math.floor(Math.random()*arrayColor.length);
        }
        document.getElementById("div0"+i).style.backgroundColor=arrayColor[random];

    }
     setInterval("fun()",10);

    //定义函数
 ## 第二种方式多种颜色一起 ##
//第二种方式    /* function mfun() {
        //混合搭配，对于数组产生随机索引，两者的索引值，两次的效果不容易出现相同的情况
        var indexDivId=Math.floor(Math.random()*(arrayDivId.length));
        var indexColor=Math.floor(Math.random()*(arrayColor.length));
        //设置背景颜色，给div设置背景颜色，改变CSS样式， 可以使用JavaScript代码完成
        var xdiv=document.getElementById(arrayDivId[indexDivId]);
        xdiv.style.backgroundColor=arrayColor[indexColor];
    }
    //开启定时器，设置时间的毫秒值
    setInterval("mfun()",50);*/



</script>

</body>
</html>