生成100个Div
<!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的更多相关文章
- JS随机生成100个DIV每10个换行(换色,生成V字和倒V)
附图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
- JS练习--自动生成100个li
点击按钮,自动生成100个li,红.黄.蓝.绿四种颜色的顺序显示出现在页面中 CSS: ;;} ul,li{list-style: none;} #ul1{position: relative;} # ...
- SQLServer如何快速生成100万条不重复的随机8位数字
最近在论坛看到有人问,如何快速生成100万不重复的8位编号,对于这个问题,有几点是需要注意的: 1. 如何生成8位随机数,生成的数越随机,重复的可能性当然越小 2. 控制不重复 3. ...
- python的OS模块生成100个txt文件
#!/user/bin/env/python35 # -*-coding:utf-8-*- # author:Keekuun """ 问题:生成一个文件夹,文件夹下面生成 ...
- 10-2-点击生成10个div
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【three.js练习程序】随机生成100个方块
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 【CSS系列】height:100%设置div的高度
一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...
- 如何让div中的span垂直居中 ----height:100%设置div的高度
如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...
- 【WorkTile赞助】jQuery编程挑战#009:生成两个div元素互相追逐的动画
HTML页面: <!-- HTML代码片段中请勿添加<body>标签 //--> <div id="container"> <div id ...
随机推荐
- Python学习系列之异常处理
什么是异常处理 python内置了一套try···except···finally的错误处理机制 当程序出错的时候进行捕捉,然后根据捕捉到的错误信息进行响相应的处理 常用的内建异常 初识异常处理 如例 ...
- 如何快速掌握plc或工控机与其他设备的modbus通讯协议?包括格式与实际过程 RT,本人从事工控行业多年,对于PLC与触摸屏也算比较熟悉,唯独对这个通讯协议比较难理解,请教高人指导,从什么地方开始下手,或者是说如何正确理解报文格式或正确写入
Modbus协议是OSI模型的第七层的应用层通讯协议,定义了不同类型设备间交换信息方式,以及信息的格式. Modbus的工作方式是请求/应答,每次通讯都是主站先发送指令,可以是广播,或是向特定从站的单 ...
- Spring Boot中微信全局token的缓存实现
为什么要缓存token? 这里的token指的是微信JSAPI中基础支持的ACCESS_TOKEN,并非网页授权ACCESS_TOKEN.网页授权Token每天的调用次数没有限制,不需要缓存. 接口 ...
- poj3511--A Simple Problem with Integers(线段树求和)
A Simple Problem with Integers Time Limit: 5000MS Memory Limit: 131072K Total Submissions: 60441 ...
- Linux系统调用过程分析
參考: <Linux内核设计与实现> 0 摘要 linux的系统调用过程: 层次例如以下: 用户程序------>C库(即API):INT 0x80 ----->system_ ...
- Codeforces Round #324 (Div. 2)C. Marina and Vasya set
C. Marina and Vasya Marina loves strings of ...
- Codeforces Round #362 (Div. 2) D. Puzzles
D. Puzzles time limit per test 1 second memory limit per test 256 megabytes input standard input out ...
- CF 1036 B Diagonal Walking v.2 —— 思路
题目:http://codeforces.com/contest/1036/problem/B 题意:从 (0,0) 走到 (n,m),每一步可以向八个方向走一格,问恰好走 k 步能否到达,能到达则输 ...
- bzoj1854 [Scoi2010]游戏——匈牙利算法
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1854 这题...据说可以用并查集做,但没有去看... 用二分图匹配的话,就把装备和它的两个属 ...
- Maximum Gap 典型线性排序
https://leetcode.com/problems/maximum-gap/ Given an unsorted array, find the maximum difference betw ...