zoukankan      html  css  js  c++  java
  • 利用数组将九种颜色不重复的显示在九个盒子中

    排除与选入

    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{
         50px;
        height: 50px;
        margin: 10px;
    }
  • 相关阅读:
    myeclise中创建maven web程序
    java定时任务调度工具
    fastjson常用方法
    log4j2的配置及使用
    spring事务配置
    java利用poi解析excel文件
    ScheduledTheadPool线程池的使用
    ThreadPoolExecutor线程池
    jQuery属性操作(一)
    jQuery队列(三)
  • 原文地址:https://www.cnblogs.com/Model-Zachary/p/7081661.html
Copyright © 2011-2022 走看看