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;
        }

     

     

  • 相关阅读:
    fopen flock fclose 文件用法
    thinkphp并发 阻塞模式与非阻塞模式
    thinkphp3.2 控制器导入模型
    thinkphp3.2 session时间周期无效
    UWP滑动后退
    旺信UWP公测邀请
    旺信UWP倒计时
    UWP应用开发系列视频教程简介
    新浪微博UWP UI意见征求
    淘宝UWP--自定义图片缓存
  • 原文地址:https://www.cnblogs.com/fuxiang-yang/p/4954049.html
Copyright © 2011-2022 走看看