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. java基础知识三 流

    Java 流(Stream).文件(File)和IOJava.io 包几乎包含了所有操作输入.输出需要的类.所有这些流类代表了输入源和输出目标. Java.io 包中的流支持很多种格式,比如:基本类型 ...

  2. javaweb c3p0连接oracle12c

    最近在搞javaweb,在连接池上碰到了一系列的问题,在Junit测试时,oracle12c报错: ORA-28040: 没有匹配的验证协议 百度解决:修改 $ORACLE_HOME/network/ ...

  3. python学习-Pillow图像处理

    Pillow中文文档:https://pillow-cn.readthedocs.io/zh_CN/latest/handbook/tutorial.html 安装:pip install pillo ...

  4. python 逻辑运算 ‘and’ ,'or' 在实战中的作用,代替if语句。

    彩票程序:课上方法:import random # 生成一个随机两位数 作为一个中奖号码luck_num = random.randint(10,99)print(luck_num)luck_num_ ...

  5. 2018-2019-2 20165206 网络攻防技术 Exp5 MSF基础应用

    - 2018-2019-2 20165206<网络攻防技术>Exp5 MSF基础应用 - 实验任务 1.1一个主动攻击实践,如ms08_067; (1分) 1.2 一个针对浏览器的攻击,如 ...

  6. 使用makecert.exe创建数字证书

    RT makecert.exe不用去找,安装VS2008后,在开始菜单相应的路径找到该命令提示符:Microsoft Visual Studio 2008/Visual Studio Tools/Vi ...

  7. 2018-2019 20165235 网络对抗 Exp4 恶意代码分析

    2018-2019 20165235 网络对抗 Exp4 恶意代码分析 实验内容 系统运行监控 使用如计划任务,每隔一分钟记录自己的电脑有哪些程序在联网,连接的外部IP是哪里.运行一段时间并分析该文件 ...

  8. 在VUE-CLI 3下的第一个Element-ui项目（菜鸟专用）

    vue-cli3.0使用及配置 (https://www.cnblogs.com/xzqyun/p/10779891.html  ) 以上是  vue-cli3.0使用及配置   这里我们来引用基于v ...

  9. python copy模块

    python copy模块 copy模块用于对象的拷贝操作 该模块只提供了两个主要的方法: copy.copy:浅复制 copy.deepcopy:深复制 直接赋值,深拷贝和浅拷贝的区别 直接赋值:简 ...

  10. 防御xss 大致理解

    前端 发送留言内容 包含 js 代码 后台 管理员 查看 留言 代码被执行 拿到cookie 成功登陆 解决办法 对录入 进行相关的过滤处理 其他解决方法 正在学习中