<!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. CentOS 7 es搭建测试

    搭建本地yum repo pass 指定特定repo 安装,比如安装wget.(指定特定repo 是为了从最快的repo安装) yum --disablerepo=\* --enablerepo=os ...

  2. android的ndk学习（1）

    android的ndk学习(1)   之前学了一段时间ndk,总认为要总结一下.ndk使得很方便地实现java和C与C++代码的相互沟通.合理地掌握使用ndk能够提高应用程序的运行效率.所以对于学习a ...

  3. VB打开project时出现冲突名称提示

    在敲机房时因为窗口命名不合适,我就改动了下窗口.可是保存后再打开的时候.却出现以下的提示: 这样的情况出现.通常是因为引用了别人的窗口文件,或者是改动窗口的名字可是就是找不到不论什么冲突的地方.事实上 ...

  4. .NET Core/.NET之Stream简介 Rx.NET 简介

    .NET Core/.NET之Stream简介   之前写了一篇C#装饰模式的文章提到了.NET Core的Stream, 所以这里尽量把Stream介绍全点. (都是书上的内容) .NET Core ...

  5. Spring+Quartz实现定时任务的配置方法（插曲）

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46376093 1.Scheduler的配置 <bean class=&quo ...

  6. Linux watchdog 6300esb

     基本原理: Linux 自带了一个 watchdog 的实现,用于监视系统的执行,包含一个内核 watchdog module 和一个用户空间的 watchdog 程序.内核 watchdog ...

  7. [Unity-21] Prefab具体解释

    1.什么是Prefab? Prefab又被称为预设,以下部分来自官网:预置是一种资源类型--存储在项目视图中的一种可反复使用的游戏对象.预置能够多次放入到多个场景中. 当你加入一个预置到场景中,就创建 ...

  8. mybaties中，模糊查询的几种写法

    模糊查询: 工作中用到,写三种用法吧,第四种为大小写匹配查询 1. sql中字符串拼接 SELECT * FROM tableName WHERE name LIKE CONCAT(CONCAT('% ...

  9. 17年day3

    /* 嗯,又一天. 时日无多了,还能蹦哒几天? 上午依旧考试,日常挂T1,读错题.还是好困. 兔子说明天晚上要请我们吃水饺~~~~去年就没这待遇. 下午打开邮箱一看,咦?嗯. 昨晚做噩梦NOIP考了状 ...

  10. npm install 安装软件，出现 operation not permitted, mkdir 'C:\Program Files\nodejs\node_cache'

    问题如下图: 解决办法: 在开始菜单栏里打开cmd的时,右击选择“以管理员身份运行”.然后再在打开的cmd里运动install就没问题了. 这个问题应该是当时安装依赖时,我们是以管理员身份运行的:所以 ...