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;
    }
  • 相关阅读:
    抓老鼠啊
    币值转换
    打印沙漏
    秋季学习总结
    第五周课程总结&试验报告(三)
    第四周课程总结&试验报告2
    实验报告一 &第三周课程总结
    Java第二周总结
    2019春总结作业
    第十六周
  • 原文地址:https://www.cnblogs.com/Model-Zachary/p/7081661.html
Copyright © 2011-2022 走看看