代码1效果图：

　　　　　　

代码2效果图：

　　　　　　

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            div {

                width: 50px;

                height: 50px;

                background: red;

                position: absolute;

                top: 0;

                left: 0;

                font-size: 30px;

                text-align: center;

                line-height: 50px;

                color: #fff;

            }

        </style>

        <script>

            window.onload = function() {

                var aDiv = document.getElementsByTagName('div');

                //先创建div

                for(var i = 0; i < 20; i++) {

                    document.body.innerHTML += '<div>' + i + '</div>';

                }

                //再查找div的位置

                for(var i = 0; i < 10; i++) {

                    aDiv[i].style.left = 20 + i * 60 + 'px';

                    //                    aDiv[i].style.top = 10 + i * 50 + 'px';

                }

                //位置调整

                for(var i = 10; i < 20; i++) {

                    aDiv[i].style.left = 20 + (i - 10) * 60 + 'px';

                    aDiv[i].style.top = 60 + 'px';

                }

                //                for(var i=20;i<30;i++){

                //                    aDiv[i].style.left = 20+(i+10)*60+'px';

                //                    aDiv[i].style.top = 60+'px';

                //                }

                // 逢10 往下一行（小练习）

                // 来一个小V字形（小练习）

            };

        </script>

    </head>

    <body>

    </body>

</html>

逢十往下一行(代码一)

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            div {

                width: 50px;

                height: 50px;

                background: red;

                position: absolute;

                top: 0;

                left: 0;

                font-size: 30px;

                text-align: center;

                line-height: 50px;

                color: #fff;

            }

        </style>

        <script>

            window.onload = function() {

                for(var i = 0; i < 11; i++) {

                    document.body.innerHTML += '<div>' + i + '</div>';

                }

                var aDiv = document.getElementsByTagName("div");

                for(var j = 0; j < 6; j++) {

                    aDiv[j].style.left = j * 50 + 'px';

                    aDiv[j].style.top = j * 50 + 'px';

                }

                for(var z = 6; z < 11; z++) {

                    aDiv[z].style.left = z * 50 + 'px';

                    aDiv[z].style.top = (10 - z) * 50 + 'px';

                }

            }

        </script>

    </head>

    <body>

    </body>

</html>

逢五往上(代码2)

for计算位置坐标的更多相关文章

  1. 【浅墨Unity3D Shader编程】之一 夏威夷篇：游戏场景的创建 & 第一个Shader的书写

    本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/40723789 作者:毛星云(浅墨)  ...

  2. LBS定位技术

    http://www.cnblogs.com/LBSer/p/3295642.html LBS定位技术从方法上可分成三类:基于三角关系的定位技术.基于场景分析的定位技术.基于临近关系的定位技术(唐毅和 ...

  3. 【淡墨Unity3D Shader计划】一间 创建一个游戏场景 &amp; 第一Shader写作

    本系列文章由@浅墨_毛星云 出品.转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/40723789 作者:毛星云(浅墨)  ...

  4. shader 编程入门（一）

    本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/40723789 作者:毛星云(浅墨)  ...

  5. 【浅墨Unity3D Shader编程】之中的一个 夏威夷篇：游戏场景的创建 &amp; 第一个Shader的书写

    本系列文章由@浅墨_毛星云 出品.转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/40723789 作者:毛星云(浅墨)  ...

  6. 在UnityUI中绘制线状统计图2.0

    ##在之前的基础上添加横纵坐标 上一期在这里:https://www.cnblogs.com/AlphaIcarus/p/16123434.html 先分别创建横纵坐标点的模板,将这两个Text放在G ...

  7. java 空间四点定位,可跟据已知的四点坐标(x,y,z)及距离计算所在位置坐标

    public static void main(String args[]) { try{ float point[]=new float[3]; Location loc = new Locatio ...

  8. 拼图小游戏之计算后样式与CSS动画的冲突

    先说结论: 前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间.因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲 ...

  9. html 元素 绝对位置坐标

    $(".seriesListings-itemContainer").click(function(){$(this).css("border","1 ...

随机推荐

  1. SJTU 机试 最小面积子矩阵 压缩+双指针

    链接:https://www.nowcoder.com/questionTerminal/8ef506fbab2742809564e1a288358554来源:牛客网 一个N*M的矩阵,找出这个矩阵中 ...

  2. Cboard Cube 实现Top X效果

    第一步,点击度量值指标的排序. 第二步,点击[过滤]图标,选择Filter 在窗口中输入需要Top X的数字即可. 预览效果如下: 版权声明:本文为博主原创文章,需要转载请注明出处. [置顶]Cboa ...

  3. springcloud微服务总结 zuul

    一 springcloud网关组件理解: 为什么需要网关呢? 我们知道我们要进入一个服务本身,很明显我们没有特别好的办法,直接输入IP地址+端口号,我们知道这样的做法很糟糕的,这样的做法大有问题,首先 ...

  4. Xilinx FPGA使用——ROM初始化文件

    在调用ROM的IP Core时,需要对其进行初始化,利用MATLAB生成其初始化数据文件. 工具:ISE 14.7.MATLAB.notepad++ 废话不多说,直接上MATLAB代码,生成了一个10 ...

  5. C++_友元1-友元类是什么

    友元函数:不是类的成员函数,但是能够访问类的私有数据成员. 之前有个矛盾就是规定非成员函数不能直接访问类的私有数据,但是这会儿却可以,但那只是针对常规非成员函数而言,特殊的非成员函数就可以访问类的私有 ...

  6. SQL Server2012如何更改服务器的名称

    Problem: sql server 2012 安装完毕后,连接数据库只能使用 机器名\数据库实例 的方式,想用 localhost 或 . 作为服务器名称不可以 Solution: 参考:http ...

  7. opencv基本操作

    src.convertTo(dst, type, scale, shift) 缩放并转换到另外一种数据类型: dst:目的矩阵 type:需要的输出矩阵类型,或者更明确的,是输出矩阵的深度,如果是负值 ...

  8. Q443 压缩字符串

    给定一组字符,使用原地算法将其压缩. 压缩后的长度必须始终小于或等于原数组长度. 数组的每个元素应该是长度为1 的字符(不是 int 整数类型). 在完成原地修改输入数组后,返回数组的新长度. 进阶: ...

  9. SQL注入(过滤空格和--+等注释符)

    1.地址:http://ctf5.shiyanbar.com/web/index_2.php(过滤了空格和--+等注释符) 思路:确定注入参数值类型,直接输入单引号,根据报错信息确定参数值类型为字符型 ...

  10. Union Find - 20181102 - 20181105

    Union Find: 589. Connecting Graph public class ConnectingGraph { //父节点数组 private int[] father = null ...