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. apache无法启动报错No space left on device

    apache无法启动报错No space left on device 故障现象:apache无法启动ipcs信号量很多 # service httpd startStarting httpd : [ ...

  2. proxy ubunta

    /etc/environment : Is the correct place to specify system-wide environment variables that should be ...

  3. 定时-thinkphp

    链接:https://pan.baidu.com/s/1wHayb9fYOiiMB3Scms0iRQ 提取码:51ex 复制这段内容后打开百度网盘手机App,操作更方便哦

  4. Java版InfluxDB工具类

    InfluxDB工具类 package com.influxdb.test; import java.util.Map; import org.influxdb.InfluxDB; import or ...

  5. echarts-map-区县

    首先通过百度获取经纬度 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q ...

  6. OpenGL编程指南（第九版） Tiangles 学习笔记

    ////////////////////////////////////////////////////////////////////////////// // // Triangles.cpp / ...

  7. neutron--ml2 plugin

    ml2 plugin 对 plugin 的功能进行抽象和封装,有 ml2 plugin ,各种 network 无需开发自己的 plugin,只需开发 ml2 plugin 相对应的 driver , ...

  8. Python判断输入字符类型

    """从键盘上输入 一个字符,判断其字符类型.""" while True: char = input("请输入需要判断的字符:& ...

  9. Runtime个别API的使用

    Runtime 关于属性部分API的说明以及使用方法 使用Runtime机制需要引入头文件: #import <objc/runtime.h> 1:  Ivar *class_copyIv ...

  10. string对象方法

    一:str.isalnum() ,str.isalpha(),str.isdigit() ,str.islower() ,str.isupper() 1.str.isalnum() This meth ...