<!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. MongoDB小结27 - 聚合管道【$project】

    我们有这样的数据 { "_id" : 1, title: "abcdef", isbn: "6969696969", author: { l ...

  2. ETL增量单表同步简述_根据dateTime增量

    ETL增量单表同步简述 1. 实现需求 当原数据库的表有新增.更新.删除操作时,将改动数据同步到目标库对应的数据表. 2. 设计思路 设计总体流程图如下: 步骤简单说明: 1.设置job的执行属性,如 ...

  3. session问题总既然（深入理解）&Token问题理解&sso单点登陆理解实现

    一.Session使http协议成为有状态协议(浏览器cookie本地这个session,服务器端也有这个session) 1.ajax前端登陆无法保存session,造成无法维持登陆状态(http本 ...

  4. 类的operator new与operator delete的重载【转】

    http://www.cnblogs.com/luxiaoxun/archive/2012/08/11/2633423.html 为什么有必要写自己的operator new和operator del ...

  5. yarn 和 npm 的区别

    npm 与 yarn 命令对比 npm yarn npm install yarn install (N/A) yarn install --flat (N/A) yarn install --har ...

  6. 使用requireJS的shim參数，完毕jquery插件的载入

    没有requireJS框架之前,假设我们想使用jquery框架,会在HTML页面中通过<script>标签载入.这个时候jquery框架生成全局变量$和jQuery等全局变量.假设项目中引 ...

  7. 推荐IOS开发3个工具:Homebrew、TestFight、Crashlytics-b

    1. Homebrew 什么是Homebrew? Homebrew is the easiest and most flexible way to install the UNIX tools App ...

  8. ZOJ - 3471 Most Powerful (状态压缩)

    题目大意:有n种原子,两种原子相碰撞的话就会产生能量,当中的一种原子会消失. 问这n种原子能产生的能量最大是多少 解题思路:用0表示该原子还没消失.1表示该原子已经消失.那么就能够得到状态转移方程了 ...

  9. C++之new和malloc差别

         在C++程序猿面试中.非常easy被问到new 和 malloc的差别.偶尔在quora上逛.看到Robert Love的总结.才发现自己仅仅知道里面的一两项就沾沾自喜,从来没有像这位大牛一 ...

  10. Raphael.js API 之Element.remove(),Element.removeData(),paper.text(),Element.node(),Element.onDragOver

    /*API-38*/ Element.remove() 删除某个元素对象,无返回值 /*API-39*/ Element.removeData([key]); 删除某个key的value值.假设没有特 ...