changXY

<!DOCTYPE html>

<html>

<head>

  <link rel="shortcut icon" href="./assets/favicon.ico" />

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

  <title>changeXY</title>

</head>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        #ul li{

           list-style: none;

            width: 50px;

            height: 50px;

            text-align: center;

            line-height: 50px;

            border-right: none;

            background: papayawhip;

            border: 1px solid #000;

        }

        #ul{

            margin: 200px auto;

            display: flex;

            flex-wrap: wrap;

            overflow: hidden;

            position: relative;

        }

        .button{

            position: absolute;

            top: 14%;

            right: 21%;

            background-color: aquamarine;

        }

    </style>

<body>

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

<button class='button' onclick="ChangeVlaue()">changeXY</button>

</body>

<script>

    let arr=[];

    let size=6;

    let sizeGrid=50

    let len =size*size;

    let ul = document.getElementById('ul')

    let OLi =ul.getElementsByTagName('li')

    ul.style.width = size*(sizeGrid + 2)+'px' ;

    for( let i=0 ;i <len;i++){

        let Oli = document.createElement('li')

        Oli.style.width = sizeGrid +'px';

        Oli.style.height = sizeGrid +'px';

        Oli.innerHTML =i;

        arr.push(i);

        ul.appendChild(Oli)

    }

    function ChangeVlaue(){

        arr = changeXY(arr,size)

        for( let i =0;i<arr.length;i++){

            // console.log("arr[i]-------",arr[i])

            // console.log("OLi[i]--",OLi[i])

            OLi[i].innerHTML = arr[i];

        }

    }

    function changeXY(arr,size){

        let NewArr=[];

        let j =0;

        (function(){

            if(size == j){

                return;

            }

            for( let i=0 ;i<arr.length;i++){

                if( i%size == j){

                    NewArr.push(arr[i])

                }

            }

            j++;

            arguments.callee() /* 匿名函数自调用*/

        })();

        return  NewArr;

    }

</script>

</html>

　　

changXY的更多相关文章

随机推荐

  1. SQL Server 数据库备份和还原

    一.SQL命令 备份BACKUP DATABASE TestDb TO DISK='d:\TestDb.bak'还原RESTORE DATABASE TestDb FROM DISK='d:\Test ...

  2. 【MySQL】MySQL基础操作语句

    mysql基础操作语句,包括数据库的增.删.切换,以及表的增.删.改.查.复制. 创建数据库 mysql> create database tem; 使用数据库 mysql> use te ...

  3. WPF 10天修炼 第四天- WPF布局容器

    WPF布局 WPF的窗口也就是Window类,是一个内容控件,该控件派生自ContentControl.内容控件有一个Content属性,该属性有一个限制,只能放置一个用户界面元素,或一个字符串.为了 ...

  4. eclipse导入maven时，pom文件的project一直报错（Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.12.）

    这里有两种解决办法. 一:右键项目->maven->update project勾选上Force Update of Snapshots/Releases然后ok就可以了. 二:如果第一种 ...

  5. ad9361自测试校准

    #include "config.h" #include "CONFIG_FPGA_ALL.h" #include "xparameters.h&qu ...

  6. ProgressDialog替代

    在API level 26 中,ProgressDialog被声明不赞成使用,应使用的替代方法是ProgressBar 利用下列代码实现ProgressBar的出现和消失 progressBar.se ...

  7. loadrunner使用过程遇到的问题（一）

    1.如果log日志出现乱码,如何设置?(对于乱码设置只是对单一脚本有效,并不是全部脚本有效,所以多个脚本出现乱码,需要逐个设置) loadrunner12版本设置方法,在preference里面,设置 ...

  8. mysqldump命令使用

    1.执行mysqldump命令前,先给配制添加帐号和密码: # vi /etc/my.cnf user=root password=XXXXXX 2. # mysqldump -uroot -pXXX ...

  9. [转]Go里面的unsafe包详解

    Golang的unsafe包是一个很特殊的包. 为什么这样说呢? 本文将详细解释. 来自go语言官方文档的警告 unsafe包的文档是这么说的: 导入unsafe的软件包可能不可移植,并且不受Go 1 ...

  10. Java实现一个简单的循环队列

    在某些时候,我们不能被要求像数组一样可以使用索引随机访问,而是需要被限制顺序处理业务,今天介绍一种先进先出(FIFO)的线性数据结构:队列, 当然,还有后进先出(LIFO)的处理方式,即为栈(后续有时 ...