<!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. SAS编程基础 - 逻辑库和数据集

    1. SAS逻辑库 1.1 创建SAS逻辑库: libname lb 'F:\Data_Model'; libname是关键字,lb是创建的逻辑库的名称,引号内的内容是目录路径,最后一个分号结束程序语 ...

  2. C++ - 库函数优先级队列(priority_queue)输出最小值 代码

    库函数优先级队列(priority_queue)输出最小值 代码 本文地址: http://blog.csdn.net/caroline_wendy 库函数优先级队列(priority_queue)的 ...

  3. Effective C++ Item 41 了解隐式接口和编译期多态

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie 经验:class 和 templates 都支持接口和多态. 对 classes 而言接口是 ...

  4. MAVEN项目模块化

    maven的最大的特点之中的一个就是能够把项目模块化. 前面的一篇文章MAVEN创建并打包web项目已经创建了一个简单的webapp,注意这个webapp的打包方式是war. 假设如今又要划分出来一个 ...

  5. Boss OpenCart 商城自适应主题模板 ABC-0012-01

    Boss OpenCart 商城自适应主题模板 ABC-0012-01 模板特性兼容浏览器IE7, IE8, IE9, IE10, Firefox, Safari, Chrome OpenCart版本 ...

  6. Java VS .NET：Java与.NET的特点对比 单点登录（SSO）的设计

    一.前言 为什么要写Java跟.NET对比? .NET出生之后就带着Java的影子.从模仿到创新,.NET平台也越来越成熟.他们不同的支持者也经常因为孰弱孰强的问题争论不休.但是本文并不是为了一分高下 ...

  7. scikit-learn：3. Model selection and evaluation

    參考:http://scikit-learn.org/stable/model_selection.html 有待翻译,敬请期待: 3.1. Cross-validation: evaluating ...

  8. NSArray和NSMutableArray的常用方法 (转)

    NSArray和NSMutableArray的常用方法 (转) (2013-09-06 15:13:46) 标签: it 分类: ios编程 初始化方法:   1.init返回一个空数组    2.i ...

  9. ARP协议(4)ARP编程

    之前的几篇文章,分别介绍了 ARP 协议格式,在vs2012里配置winpcap环境,我们该做的准备都已经做完了.如今我们真正来实现了. 一.定义数据结构 依据ARP的协议格式,设计一个ARP协议格式 ...

  10. C#面向过程之编译原理、变量、运算符

    .net基础:.net与C# .net是一个平台 c#是一门语言 .net的用途a.桌面应用程序 b.网站应用程序 c.专业游戏开发(XBOX360) d.嵌入式设备软件开发 e.智能手机APP开发 ...