<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
#div1{position:relative;}
#div1 div{width:50px;height:50px;position:absolute;font-size:30px;color:#fff;text-align:center;line-height:50px;}
</style>
<body>
<script>

window.onload = function()
{

var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
var arrColor = ['red','green','blue'];
var str = '';
oBtn.onclick = function()
{
for(var i=0;i<100;i++)
{
//left
//0*60 1*60 2*60
//0*60 1*60 2*60
//top
//0 0 0 0 0 0 (0-9)/10 不大于1的小数
//1*60 60 60 (10-19)/10 不大于 2 的小数
//2*60
//3*60

str += '<div style="left:'+(i%10*60)+'px;top:'+(Math.floor((i/10))*60)+'px;background:'+arrColor[i%arrColor.length]+';">'+(i+1)+'</div>';
};

oDiv.innerHTML = str;
};

}

</script>
<input type="button" id="btn1" value="生成一百个Div" >

<div id="div1">

</div>

</body>

</html>

生成100个Div的更多相关文章

  1. JS随机生成100个DIV每10个换行(换色，生成V字和倒V)

    附图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  2. JS练习--自动生成100个li

    点击按钮,自动生成100个li,红.黄.蓝.绿四种颜色的顺序显示出现在页面中 CSS: ;;} ul,li{list-style: none;} #ul1{position: relative;} # ...

  3. SQLServer如何快速生成100万条不重复的随机8位数字

    最近在论坛看到有人问,如何快速生成100万不重复的8位编号,对于这个问题,有几点是需要注意的: 1．    如何生成8位随机数,生成的数越随机,重复的可能性当然越小 2．    控制不重复 3．    ...

  4. python的OS模块生成100个txt文件

    #!/user/bin/env/python35 # -*-coding:utf-8-*- # author:Keekuun """ 问题:生成一个文件夹,文件夹下面生成 ...

  5. 10-2-点击生成10个div

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 【three.js练习程序】随机生成100个方块

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 【CSS系列】height:100%设置div的高度

    一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...

  8. 如何让div中的span垂直居中 ----height:100%设置div的高度

    如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...

  9. 【WorkTile赞助】jQuery编程挑战#009：生成两个div元素互相追逐的动画

    HTML页面: <!-- HTML代码片段中请勿添加<body>标签 //--> <div id="container"> <div id ...

随机推荐

  1. dtrace.org

    http://dtrace.org/blogs/rm/2016/09/15/turtles-on-the-wire-understanding-how-the-os-uses-the-modern-n ...

  2. MongoDB小结03 - insert、remove

    连接MongoDB(bin目录下) ./mongo 如果觉得shell里空空的可以输入help,在刷屏的同时大致了解下有哪些方法 help 现在咱们还没有数据库,咱们创建一个,任性起名:templat ...

  3. openstack setup demo Identity service

    openstack Identity service 名叫keystone.它提供了用户校验,以及服务目录查询(即列出所有的服务以及相关信息)等功能. keystone 主要包含以下几个部分 Serv ...

  4. omnidazzle是mac的画笔工具

    先使用命令 brew cask install omnidazzle 试试,不行参考下面: http://macappstore.org/omnidazzle/

  5. 【转】Linux软连接和硬链接

    再次温习一下,操作的不多.虽然感觉都会!!!! 这次再次操作一遍!! 通过上面的测试发现,删除f1之后,软连接f3就无效了,硬链接f3则不受影响. ls -F可以看到文件的类型. 连接文件的作用? - ...

  6. HTML5：理解head

    HTML文档的head部分,通常包含指定页面标题.为搜索引擎提供关于页面本身的信息.加载样式表,以及加载JavaScript文件(出于性能考虑.多数时候放在页面底部</body>标签结束前 ...

  7. JSON-JSON字符串转换成JSON对象、JSON对象数组、java实体类以及保存到List列表中

    处理JSON字符串时,一直出错,写个样例后发现原来是没有弄清楚数据的格式问题. 实现的是 JSONString 转换成java对象 或是 list列表 实例类 News package lyx.ent ...

  8. Android如何进行单元测试

    Menifest.xml中加入: <application>中加入: <uses-library android:name="android.test.runner&quo ...

  9. MFC中SliderCtrl控件的使用

    在MFC中滑动条(CSliderCtrl)是个经常使用的控件,使用方法例如以下: 主要要方法有: 1.设置.取得滑动范围: void SetRange( int nMin, int nMax, BOO ...

  10. luogu 1901 发射站

    题目大意: 一个数列,它左边第一个比它高的人和右边第一个比它高的人要加上它的权值 思路: 单调栈维护一个单调递减的栈 正反各维护一遍 #include<iostream> #include ...