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

     

     

  • 相关阅读:
    从0开始的Python学习013编写一个Python脚本
    Spring Cloud Eureka基本概述
    RocketMQ入门案例
    Quartz使用记录总结
    Spring Boot 1.5升级2.1 主要问题汇总
    Eureka客户端注册多网卡下IP选择问题
    Spring Security之动态配置资源权限
    代码规范问题
    Spring Security + OAuth系统环境搭建(一)
    Java并发编程之AQS
  • 原文地址:https://www.cnblogs.com/fuxiang-yang/p/4954049.html
Copyright © 2011-2022 走看看