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. Linux下定时备份文件

    一. 编写脚本 编写一个脚本文件,使脚本可以执行备份命令. 例如,将文件目录 /home/backups/balalala 备份到/home目录下,并压缩. 1. 创建脚本 命令格式: touch 路 ...

  2. 前端笔记知识点整合之JavaScript（四）关于函数、作用域、闭包那点事

    一.自定义函数function 函数就是功能.方法的封装.函数能够帮我们封装一段程序代码,这一段代码会具备某一项功能,函数在执行时,封装的这一段代码都会执行一次,实现某种功能.而且,函数可以多次调用. ...

  3. goland 文件头自动注释

    1 代码 /** * @Author: ${USER} * @Description: * @File: ${NAME} * @Version: 1.0.0 * @Date: ${DATE} ${TI ...

  4. 高可用Redis(六)：瑞士军刀之bitmap，HyperLoglog和GEO

    1.bitmap位图 1.1 bitmap位图的概念 首先来看一个例子,字符串big, 字母b的ASCII码为98,转换成二进制为 01100010 字母i的ASCII码为105,转换成二进制为 01 ...

  5. MySQL存储过程中的事务执行失败之后获取错误信息

    1.表结构: 2. 存储过程中: 代码如下: BEGINDECLARE CONTINUE HANDLER FOR SQLEXCEPTIONBEGINROLLBACK;GET DIAGNOSTICS C ...

  6. 差分线Layout的两个误区

    误区一:认为差分线可以相互之间耦合,所以可以相互之间提供回流路径,不需要地作为回流路径: 其实在信号回流分析上,差分走线和普通的单端走线的机理是一致的,即高频信号总是沿着电感最小的回路进行回流.最大的 ...

  7. maven与eclipse连接的配置

    1.修改本地仓库位置 maven从中心仓库下载的文件一般默认放在本地用户文件加下的.m2/repository文件夹中,修改则需要找到所下载的maven文件夹下的conf文件夹下的setting.xm ...

  8. Rest分页接口开发

    简单描述:需求说后端写一个XX数据的分页接口,给前端口调用,其实有一个PageHelper的工具类可以直接使用但是老大不让用,得用sql写,.小Kiss啦.直接上代码 代码: //Controller ...

  9. JS监听浏览器的返回、后退、上一页按钮的事件方法

    在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包等 ...

  10. python实现JWT

    python实现JWT 一.常见的几种实现认证的方法 1.1basic auth 1.2cookie 1.3token json web token--一种基于token的json格式web认证方法. ...