for计算位置坐标
代码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计算位置坐标的更多相关文章
- 【浅墨Unity3D Shader编程】之一 夏威夷篇：游戏场景的创建 & 第一个Shader的书写
本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/40723789 作者:毛星云(浅墨) ...
- LBS定位技术
http://www.cnblogs.com/LBSer/p/3295642.html LBS定位技术从方法上可分成三类:基于三角关系的定位技术.基于场景分析的定位技术.基于临近关系的定位技术(唐毅和 ...
- 【淡墨Unity3D Shader计划】一间 创建一个游戏场景 & 第一Shader写作
本系列文章由@浅墨_毛星云 出品.转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/40723789 作者:毛星云(浅墨) ...
- shader 编程入门（一）
本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/40723789 作者:毛星云(浅墨) ...
- 【浅墨Unity3D Shader编程】之中的一个 夏威夷篇：游戏场景的创建 & 第一个Shader的书写
本系列文章由@浅墨_毛星云 出品.转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/40723789 作者:毛星云(浅墨) ...
- 在UnityUI中绘制线状统计图2.0
##在之前的基础上添加横纵坐标 上一期在这里:https://www.cnblogs.com/AlphaIcarus/p/16123434.html 先分别创建横纵坐标点的模板,将这两个Text放在G ...
- java 空间四点定位,可跟据已知的四点坐标(x,y,z)及距离计算所在位置坐标
public static void main(String args[]) { try{ float point[]=new float[3]; Location loc = new Locatio ...
- 拼图小游戏之计算后样式与CSS动画的冲突
先说结论: 前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间.因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲 ...
- html 元素 绝对位置坐标
$(".seriesListings-itemContainer").click(function(){$(this).css("border","1 ...
随机推荐
- Python3异常处理
一. 简介 在编程过程中为了增加友好性,在程序出现Bug时一般不会直接将错误信息展示给用户,而是提供一个友好的输出提示. 二. 使用 1. 异常基础 常用结构: try: pass except Ex ...
- php 写入csv时 双引号，逗号及特殊字符
1.双引号 <?php function new_csv($string) { $filename = date('Ymd').'.csv'; //设置文件名 header("Cont ...
- JAVA基础——Java 中必须了解的常用类
Java中必须了解的常用类 一.包装类 相信各位小伙伴们对基本数据类型都非常熟悉,例如 int.float.double.boolean.char 等.基本数据类型是不具备对象的特性的,比如基本类型不 ...
- kerl build error
删除 archives文件夹就行了
- Windows 搭建ASP.NET Boilerplate项目开发环境
1.本机安装对应版本的.net core 2.安装vs2017或以上版本 3.从ABP官网下载模板,我下载的是前后端分离的Angular模板 4.用vs2017分别打开前后端,还原Nuget包 5.前 ...
- 112th LeetCode Weekly Contest Validate Stack Sequences
Given two sequences pushed and popped with distinct values, return true if and only if this could ha ...
- android 无线调试 [无需数据线][无需root]
无线调试首要条件在同一网段,打开开发者模式 1,打开 5555 端口 使用数据线链接手机,在命令窗口执行:adb tcpip 5555 2,adb 链接手机调试 这时无需数据线了,在命令窗口执行:ad ...
- c语言实现栈的增删查减
#include"stdio.h"#include"stdlib.h"#define STACK_SIZE 100#define STACKINCREMENT ...
- lnmp 一键搭建脚本
转载注明出处!!!!!!!!! 不足之处望多多指教. 不明之处站内私. #!/bin/bash #################################################### ...
- Java基础20-构造代码块
特点: 对象一建立就运行了,而且优先于构造函数执行 作用:给对象初始化的 构造代码块和构造方法的区别: 构造方法是对应的对象进行初始化 构造代码块是给所有的对象进行统一的初始化 public clas ...