<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{background:url(img/79.jpg);position:absolute}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var aDiv=oDiv.getElementsByTagName('div');
var arr = [ 'red', 'yellow', 'blue' ];

var str = '';
for( var i=0; i<6; i++){
for ( var j=0; j<10; j++){
str+="<div style='background-position:"+ (-j*48) +'px '+(-i*50)+"px;width:50px;height:50px;position:absolute;top:"+i*52+"px;left:"+j*52+"px;'></div>";
};
};
oDiv.innerHTML=str;

//横向6排，纵向10排，每次在执行完一次外面的循环后条件满足就会执行里面的循环，里面的循环的DIV要想实现横向布局就需要定位，top值是i,left值是j.
//算好每张图片需要背景定位的数值。

};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

JS初学之-循环生成坐标的更多相关文章

  1. php循环生成的表单如何获得其各项值案例

    思路:输入框和按钮是用for循环生成的,不但要获取输入框里的各项值,并且要获取点击按钮的值,要知道是那个按钮被点击了,这里以生成5个为例.如图: 这是提交页面,点击的是“小米”. 这是显示结果,测试显 ...

  2. node.js 初学（一）—— http fs 服务器/文件/post get

    node.js 初学 —— http fs 服务器/文件/post get 这个世界,从来不会给失败者颁奖! 了解 node.js (开源) node.js 是用来做后台开发的,但是现在大部分前端人员 ...

  3. ASP.NET Boilerplate 学习 AspNet Core2 浏览器缓存使用 c#基础，单线程，跨线程访问和线程带参数 wpf 禁用启用webbroswer右键菜单 EF Core 2.0使用MsSql/MySql实现DB First和Code First ASP.NET Core部署到Windows IIS QRCode.js：使用 JavaScript 生成

    ASP.NET Boilerplate 学习   1.在http://www.aspnetboilerplate.com/Templates 网站下载ABP模版 2.解压后打开解决方案,解决方案目录: ...

  4. Node.js：事件循环

    ylbtech-Node.js:事件循环 1.返回顶部 1. Node.js 事件循环 Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 ...

  5. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js种的循环语句

    //js种的循环语句 //while与do while的区别是while是满足条件后才执行 //do while是不管满不满足条件都会执行一次 //for 循环与while,do while相比循环结 ...

  7. 一个很吊的swing循环生成窗口。

    import javax.swing.*; import java.awt.event.ActionListener; import java.awt.event.ActionEvent; publi ...

  8. js中的循环语句

    js中的循环语句可分为三种:1.while:2.do……while:3.for. while的语法为 while (exp) {    //statements;} var a=1,b=0; whil ...

  9. swift基本用法－for循环遍历,遍历字典,循环生成数组

    // Playground - noun: a place where people can play import UIKit //--------------------------------- ...

随机推荐

  1. win10 ctrl + 空格 热键取消

    关键:添加English,并上移到第一,即开机默认即可.Win8+不用修改注册表的,只有win7里才可能需要修改注册表. http://superuser.com/questions/327479/c ...

  2. Java并发编程（三）后台线程（Daemon Thread）

    后台线程,守护线程(Daemon Thread) 所谓的后台线程,就是指这种线程并不属于程序中不可或缺的部分,因此当所有的非后台线程结束时,程序也就终止了,同时会杀死进程中的所有后台线程.通过setD ...

  3. C# 轉義字符

    转义字符 意义 ASCII码值(十进制) \a 响铃(BEL) 007 \b 退格(BS) ,将当前位置移到前一列 008 \f 换页(FF),将当前位置移到下页开头 012 \n 换行(LF) ,将 ...

  4. java jdbc----mysql的select、insert、update、delete

    //-----------------------------------select---------------------------------- import java.sql.Connec ...

  5. 如何利用SVN合并代码

    一.  背景     平时在进行开发时,一般都会有多版本同时进行,包括项目版本.周版本.紧急版本等,当某一个版本具备上线条件后,需要在上一个已发布的版本基础上进行发布,才能够避免出现版本相互覆盖,因此 ...

  6. monkey（1）

    写完应用之后,作完单元测试和功能测试,必要对应用的抗打击能力做个测试,最好的方法是雇个“猴子”在测试,猴子可以胡乱瞎按键,在这种情况下,你的应用是否还能正常工作呢?Android 测试包中提供了一个M ...

  7. unix shell-01 file

    1 一个文件有三种访问方式: 1.读,可以显示该文件的内容 2.写,删除或者编辑这个文件 3.执行,如果该文件时一个shell脚本或程序 按照文件所针对的用户,用户可以分为三种: 1.文件属主,即该文 ...

  8. PIT，BL，AP，CP，CSC

    使用ODIN刷机的时候,要选择ROM文件,以下是5件套各部分的说明: PIT:分区信息,如果没有更换ROM,一般不需要刷,也不需要勾选re-partition选项 BL:bootloader,引导信息 ...

  9. ES6:模块简单解释

    modules是ES6引入的最重要的一个特性. 以后写模块的时候就直接按照ES6的modules语法来写 ,然后用babel+browserify 来打包就行了. modules规范分两部分,一部分是 ...

  10. Squid代理之普通代理

    1.配置Squid 代理服务器IP地址 将eth1的IP地址修改为200.168.10.1