利用数组将九种颜色不重复的显示在九个盒子中

排除与选入

复制代码
var ArrList=['#00b8e1','#e65e20','#64be10','#eb7327','#19a657','#e2a019','#8e28c5','#034f95','#92ce4b'];
        function getArrayItems(ColorArr, num) {
            var Color_array = new Array();
            for(var index in ColorArr) {
                Color_array.push(ColorArr[index]);
            }
            var return_array = new Array();
            for(var i = 0; i < num; i++) {
                if(Color_array.length > 0) {
                    var arrIndex = Math.floor(Math.random() * Color_array.length);
                    return_array[i] = Color_array[arrIndex];
                    Color_array.splice(arrIndex, 1); //把筛选出的给这个新的数组,然后删除前一个
                } else {
                    break;
                }
            }
            return return_array;
        }
复制代码

调用选取的结果

复制代码
function addHtmlxl(){
            var newArray = getArrayItems(ArrList,10);

            $('.divColor').each( function(index, val) {
                $(val).css('backgroundColor',newArray[index]);
            });
            
        }
            
        $(document).ready(function(){
            addHtmlxl();
            
        })
复制代码

html部分

复制代码
div class="box">
            <div class="divColor">
                1
            </div>
            <div class="divColor">
                2
            </div>
            <div class="divColor">
                3
            </div>
            <div class="divColor">
                4
            </div>
            <div class="divColor">
                5
            </div>
            <div class="divColor">
                6
            </div>
            <div class="divColor">
                7
            </div>
            <div class="divColor">
                8
            </div>
            <div class="divColor">
                9
            </div class="divColor">
        </div>
View Code
复制代码

css部分

.divColor{
    width: 50px;
    height: 50px;
    margin: 10px;
}

 

posted @   xuanPhoto  阅读(154)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 记一次.NET内存居高不下排查解决与启示
点击右上角即可分享
微信分享提示