zoukankan      html  css  js  c++  java
  • 关于js算法行列互换

    HTML代码的话就是

    <ul id="ul1"></ul>

    css

    body,ul,li{margin: 0;padding: 0;font-family: "黑体";background: #eee;}
    li{list-style: none;}
    #ul1{margin: 20px auto;border-top: 1px solid #666;border-left: 1px solid #666;overflow: hidden;text-align: center;}
    #ul1 li{float: left;border-bottom: 1px solid #666;border-right: 1px solid #666;font-size: 18px;transition:background 1s linear;}

    js

    var oUl = document.getElementById('ul1');
        var aLi = oUl.getElementsByTagName('li');
        var size = 10;
        var sizeGrid = 60;
        var len = size*size;
        var arr = [];

        oUl.style.width = size*(sizeGrid + 1) + 'px';
        oUl.style.height = size*(sizeGrid + 1) + 'px';

        for(var i=0; i<len; i++){
            var oLi = document.createElement('li');
            oLi.style.width = sizeGrid + 'px';
            oLi.style.height = sizeGrid + 'px';
            oLi.innerHTML = i;
            oLi.style.lineHeight = sizeGrid + 'px';
            arr.push( i );
            oLi.style.background = "rgba(" +Math.floor(Math.random()*255 + 1)+ "," +Math.floor(Math.random()*255 + 1)+ "," +Math.floor(Math.random()*255 + 1)+ "," +.5+  ")";
            //console.log( arr );
            oUl.appendChild( oLi );
        }
        console.log( aLi.length );

        setInterval(function(){
            for(var i=0; i<aLi.length; i++){
                aLi[i].style.background = "rgba(" +Math.floor(Math.random()*255 + 1)+ "," +Math.floor(Math.random()*255 + 1)+ "," +Math.floor(Math.random()*255 + 1)+ "," +.5+  ")";
            }
            console.log(1);
        }, 1500);


        arr = changeXY(arr);
        //console.log( arr );
        for(var i=0; i<arr.length; i++){
            aLi[i].innerHTML = arr[i];
        }

        function changeXY( arr ){
            var newArr = [];
            var iNow = 0;
            (function(){
                if(size == iNow){
                    return;
                }
                for(var i=0; i<arr.length; i++){
                    if( i%size == iNow){
                        newArr.push( arr[i] );
                    }
                }
                iNow++;
                arguments.callee();
            })()
            /*for(var i=0; i<arr.length; i++){
                if( i%size == iNow){
                    newArr.push( arr[i] );
                }
            }*/
            //console.log( newArr );
            return newArr;
        }

     

     

  • 相关阅读:
    python基础十一之装饰器进阶
    python基础十之装饰器
    python基础九之函数
    python基础八之文件操作
    python基础七之copy
    python基础七之集合
    python基础数据类型汇总
    python基础六之编码
    synchronized关键字的内存语义
    对于this和当前线程的一些理解
  • 原文地址:https://www.cnblogs.com/fuxiang-yang/p/4954049.html
Copyright © 2011-2022 走看看