<!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. $modal

    $scope.open = function (size,data) {var modalInstance = $modal.open({ templateUrl: 'myModalContent.h ...

  2. JDBC 连接池

    数据库连接池(connection pool) JDBC数据库连接池的必要性 在使用开发基于数据库的web程序时,传统的模式基本是按以下步骤: 在主程序(如servlet.beans)中建立数据库连接 ...

  3. nbtstat -a <IP> 会显示主机名、所在工作组等信息

    nbtstat -a <IP> 会显示主机名.所在工作组等信息

  4. 如何在windows上搭建ftp服务器

    FTP(File Transfer Protocol)是TCP/IP网络上两台计算机传送文件的协议,使得主机间可以共享文件.目前有很多软件都能实现这一功能,然而windows自带的IIS就可以帮助你搭 ...

  5. 戴文的Linux内核专题：08内核配置（5）

    转自Linux中国 Linux内核拥有许多可以配置的特性,接下来我们还有许多要配置. 下一个可以配置的特性是x86的随机数生成器(x86 architectural random number gen ...

  6. jpcap

    1.System.out.println( System.getProperty("java.library.path")); 2.将jpcap.dll放到上边打印的路径中

  7. 防止忘记初始化NSMutableArray的方法

    在写项目的过程中,经常会遇到一些郁闷的事,往一个可变数组中添加一个模型数据时,经常会发现程序运行很正常,可是可变数组中就是没有任何数据,久病成医,我发现自己总是放一个错,就是NSMutableArra ...

  8. PHP 中的 9 个魔术方法

    这个标题有点牵强因为php有不只9种魔术方法, 但是这些将会引导你使用php魔术方法一个好的开始.它可能魔幻,但是并不需要魔杖. 这些'魔术'方法拥有者特殊的名字,以两个下划线开始,表示这些方法在ph ...

  9. ODI中的临时接口

    在ODI 11g及后续的版本中,针对复杂的ETL处理,可分解为多个步骤,在中间步骤中使用临时接口,而不用建立相应的物理表,ODI会在处理过程中自动创建和删除这些中间表,从而降低ETL处理复杂度:同时, ...

  10. matlab的正则表达式讲解[转]

    引言.啥是正则表达式?正则表达式是干啥的?我理解就和我们在word或者其他编辑软件里点的查找.替换的作用是差不多的,不过功能要强大的多,当然使用起来也稍微复杂一些.书上的定义差不多是这样的:正则表达式 ...