随机颜色

Love The Way You Lie 2022-03-18 03:56 237阅读 0赞

**随机颜色**

开发工具与关键技术：JavaScript
    作者：陈希雄
    撰写时间：2019/2/19

提醒：其实也可以拼接成自己想要的图形或者文字  
操作：单击从十种颜色获取其中一种，双击还原回原来的颜色  
源码：

<div id="div1" style="width:2000px;height:1000px">
            <div id="diva">
            </div>
        </div>
        <script>
            var attray = new Array("#ff6a00", "#ffd800", "#0000FF", "#00FFFF", "#191970", "#DC143C", "#FF0000", "#FF4500", "#FF6347", "#FF7F50");//设置好10种颜色
            var v = document.getElementById("div1");
            var width=0, height=0;
            width = parseInt(v.offsetWidth / 52);
            height = parseInt(v.offsetHeight / 52);
            for (var i = 0; i < width * height; i++)
            {
                var s = document.createElement("div");//创建div标签
                s.style = "background-color:aqua;border:1px solid #000000;width:50px;height:50px;text-align:center;display:inline-block";
                var i2 = document.createTextNode("☆");
                s.appendChild(i2);
                document.getElementById("diva").appendChild(s);
            }
            var x = document.getElementById("diva").children;//获取这个div下面的所有子元素
            for (var i = 0; i < x.length; i++) {
              
               x[i].onclick = function () {//单击加颜色
                   this.style = "background-color:" + attray[Math.floor(Math.random() * 11)] + ";border:1px solid #000000;width:50px;height:50px;text-align:center;display:inline-block";
               }
               x[i].ondblclick = function () {//双击取消
                   this.style = "background-color:aqua;border:1px solid #000000;width:50px;height:50px;text-align:center;display:inline-block";
               }
            }
        </script>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDM0Mg_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20190219103938288.gif]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MDM0Mg_size_16_color_FFFFFF_t_70]: /images/20220318/3f5abf26d7a3408d95f20ec0255fc82d.png
[20190219103938288.gif]: /images/20220318/5674eacda0bc4180aae092f7404c5221.png