代码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. P3596 [POI2015]MOD

    $ \color{#0066ff}{ 题目描述 }$ 给定一棵无根树,边权都是1,请去掉一条边并加上一条新边,定义直径为最远的两个点的距离,请输出所有可能的新树的直径的最小值和最大值 \(\color ...

  2. .NET Core 版本不支持的问题

    分析一个.NET Core开源项目(Ocelot),打开后发现提示当前版本.NET Core 不支持. 错误信息如下: The current .NET SDK does not support ta ...

  3. fork（）父子进程文件描述符的关系

    父子进程共享文件描述符:此说法,其实是父子进程共享 文件表项(父进程和子进程共享同一个file table entry) 由于子进程是父进程的拷贝,子进程会拷贝父进程的进程描述符中的文件描述符表,可以 ...

  4. php中的各种header整理

    <?php header('HTTP/1.1 200 OK'); // ok 正常访问 header('HTTP/1.1 404 Not Found'); //通知浏览器 页面不存在 heade ...

  5. office 2013 破解工具 及 软件下载

     win7/win8/win10  office2013 破解工具 下载地址: https://pan.baidu.com/s/1sZeJOCWq1fZ3KIOWvmrAQQ office2013  ...

  6. Apache https 证书配置...

    没啥好说的..赋值粘贴 !! Listen 443 SSLSessionCache "shmcb:/apache/logs/ssl_scache(512000)" SSLSessi ...

  7. LeetCode15. 三数之和

    15. 三数之和 描述 给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组. 注意:答案中 ...

  8. bzoj1818 内部白点（好题） 离散化+树状数组

    题目传送门 题意:给出很多黑点,当一个坐标上下左右都有黑点时,这个点也被染成黑色,问最后黑点的数量. 思路:首先,一个很显然的结论,不可能出现无限染色的情况.所以不会输出-1,当n为0或者1时,答案就 ...

  9. vue 在使用v-html绑定的时候，里面的元素不会继承外部的css，解决方案

    问题 想用vue绑定父文本生成的HTML内容,但是发现CSS样式根本不生效,选择器没起作用 代码: <div class="announcedetailImg" v-html ...

  10. oracle 笔记---(二)

    查询ASM实例包含的内存组件 SQL> select component,current_size from v$memory_dynamic_components 2 ; COMPONENT ...