<!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. How to force immediate stop of threads in Jmeter servers如何在jmeter执行完，立即停止jmeter

    https://stackoverflow.com/questions/38900315/how-to-force-immediate-stop-of-threads-in-jmeter-server ...

  2. 【转】基于Linux下的TCP编程

    http://blog.csdn.net/tigerjibo/article/details/6775534 一.Linux下TCP编程框架 TCP网络编程的流程包含服务器和客户端两种模式.服务器模式 ...

  3. HDU 3280 Equal Sum Partitions（二分查找）

    Equal Sum Partitions Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  4. Android AsyncTask 分析内部实现

    sdk3.0前,使用内部的线程池,多线程并发运行.线程池大小等于5,最大达128 sdk3.0后,使用默认的serial线程池.运行完一个线程,再顺序运行下一个线程.sdk3.0<=curren ...

  5. HDOJ 5381 The sum of gcd 莫队算法

    大神题解: http://blog.csdn.net/u014800748/article/details/47680899 The sum of gcd Time Limit: 2000/1000 ...

  6. 后台进程管理工具---supervisor

    supervisor是一个linux下的进程管理工具,有时须要开发一些后台服务类的程序.这类程序通常不能由于意外挂掉.所以最好能在出现意外挂掉的情况下可以重新启动,继续服务. 之前我一直採用创建dae ...

  7. hiho一下 第五十一周(有向图欧拉路径)51

    //////////////////////////////////////////////////////////////////////////////////////////////////// ...

  8. .NET中的PublicKeyToken以及强命名问题

    在.NET的GAC出现之前,以前有DLL Hell的问题.这是由于当时对于共享的DLL的处理方式.是通过採用注冊表的方式实现的.当我们安装一个程序A的时候,这个程序包括一个共享的DLL,那么这个DLL ...

  9. skype默认占用80和443port

    今天把server的port更改为80,结果起不来,报告"port已经被占用"的错误. 使用下列命令找到了元凶: 1. netstat -ano | findstr 80 找到占用 ...

  10. MyEclipse+Tomcat+MAVEN+SVN项目完整环境搭建

    这次换了台电脑,所以须要又一次配置一次项目开发环境,过程中的种种,记录下来,便于以后再次安装.同一时候给大家一个參考. 1.JDK的安装 首先下载JDK,这个从sun公司官网能够下载.依据自己的系统选 ...