<!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. 火狐和IE的window.event对象详解(转载)

    FF的FIREBUG,不仅能测试JS还能检查CSS错误,是一般常用的. 但它主要检查FF方面的错误,对IE就无能为力了. 要测试IE,就用ieTester,它可以测试IE几乎所有版本(1.0恐怕也用不 ...

  2. 离线安装chrome插件

    1. 先百度下载自己要安装的chrome插件,比如:Postman 和 Json View. 2.下载完应该得到的是扩展名为crx的文件. 比如: Postman-REST-Client_v0.8.4 ...

  3. 宏定义#define和typedef的区别和典型范例题目辨析

    宏定义#define pStr char*  ,是直接把程序中出现pStr的地方替换成char* ,直接替换: typedef  char * pStr; 是给char*定义一个别名叫做 pStr; ...

  4. iphone获取当前流量信息

    通过读取系统网络接口信息,获取当前iphone设备的流量相关信息,统计的是上次开机至今的流量信息. 代码 悦德财富:https://yuedecaifu.com 1 2 3 4 5 6 7 8 9 1 ...

  5. SharePoint 2013 Nintex Workflow 工作流帮助（十一）

    博客地址 http://blog.csdn.net/foxdave 工作流动作 27. Create item in another site(Libraries and lists分组) 该操作用于 ...

  6. SharePoint开发 - 自定义页面（错误页、登出页）

    博客地址 http://blog.csdn.net/foxdave 本文叙述如何自定义SharePoint的固有页面,比较简单,用一句话说就是"做个页面,写一句代码." 创建Sha ...

  7. Setup Factory 打包.netframework 2.0

    在setup factory 的安装目录下的Dependencies中新建目录dotnet20/并放入dotnetfx2.0.exe: Dependencies目录中再加xml文件dotnet20.x ...

  8. jvm之xms、xmx等参数分析

    注:本文摘自http://www.cnblogs.com/mingforyou/archive/2012/03/03/2378143.html ,感谢原作者 1.参数的含义-vmargs -Xms12 ...

  9. 一次蜿蜒曲折的RFID破解之路

    前言 早一段时间看到一篇看雪论坛关于逻辑嗅探破解接触式IC卡口令的文章,激起鄙人对rfid的兴趣.遂准备拿学校的卡一展身手. 0×00 前期准备 经过初步了解,学校的rfid卡片分为两种.校园卡采用M ...

  10. 算法题----称硬币： 2n(并不要求n是2的幂次方）个硬币，有两个硬币重量为m+1, m-1, 其余都是m 分治 O（lgn)找出假币

    Description: 有2n个硬币和一个天平,其中有一个质量是m+1, 另一个硬币质量为m-1, 其余的硬币质量都是m. 要求:O(lgn)时间找出两枚假币 注意: n不一定是2的幂次方 算法1: ...