<!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. Servlet上

    JavaWeb应用的概念 Java Web应用由一组Servlet.HTML页.类.以及其它可以被绑定的资源构成.它可以在各种供应商提供的实现Servlet规范的 Servlet容器 中运行. Jav ...

  2. IT公司100题-12-求1+2+…+n

    问题描述: 求1+2+…+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字以及条件判断语句(A?B:C).   分析: 利用类的静态变量实现: new一含有n ...

  3. SGU 140 扩展欧几里得

    题目大意: 给定序列a[] , p , b 希望找到一个序列 x[] , 使a1*x1 + a2*x2 + ... + an*xn = b (mod p) 这里很容易写成 a1*x1 + a2*x2 ...

  4. C++本质：类的赋值运算符=的重载，以及深拷贝和浅拷贝

    关键词:构造函数,浅拷贝,深拷贝,堆栈(stack),堆heap,赋值运算符摘要:    在面向对象程序设计中,对象间的相互拷贝和赋值是经常进行的操作.    如果对象在申明的同时马上进行的初始化操作 ...

  5. Sketchup+ArcGIS三维建模与管理

    一.软件安装及其说明 1.需要安装的软件及其安装: 这份报告主要涉及到的有三个需要安装的软件ArcGIS9.3(或9.2) .Sketchup6.0和SketchUp6 ESRI 插件. ArcGIS ...

  6. C语言实例代码

    绘制余弦曲线和直线 #include #include int main() { double y; int x,m,n,yy; for(yy=0;yy<=20;yy++) {y=0.1*yy; ...

  7. Repeater 合并单元格

    前途页面: <asp:Repeater ID="rptList" runat="server" OnPreRender="rptList_Pre ...

  8. 认真对待每一道算法题 之 两个排序好的数组寻找的第k个大的数

    转载博客:http://www.cnblogs.com/buptLizer/archive/2012/03/31/2427579.html 题目意思:给出两个排好序的数组 ,不妨设为a,b都按升序排列 ...

  9. Spring MVC配置文件解释

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  10. php大力力 [023节]CREATE TABLE创建新表sql写字段备注(2015-08-27)

    2015-08-27 php大力力023.CREATE TABLE创建新表sql写字段备注 http://www.cnblogs.com/dalitongxue/p/4762182.html 参考: ...