正文
JS随机生成100个DIV每10个换行(换色，生成V字和倒V)
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
附图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#content{margin:20px auto 0px;}
.d2{width:50px;height:50px;color:white;text-align: center;font-size:14px; background:red; line-height:50px; position:absolute; left:10px; top:40px;}
</style>
<script>
window.onload = function () {
var onOff = true;
//获取body里面的所有div
var d2 = $('content').getElementsByTagName('div');
var arr = ['red','blue','black','green'];
//生成100个div事件
$('Div100').onclick = function(){
$('content').innerHTML = '';
if(onOff){
for(var i=0; i<100; i++){
$('content').innerHTML += '<div class="d2">'+i+'</div>';
d2[i].style.left = 10+(i*60)+'px';
}
onOff = true;
}
}
//每隔10个换行
$('Div10').onclick = function(){
for(var i=0; i<100; i+=10){
for(var j=0; j<10; j++){
d2[i+j].style.left = 10+(j*60)+'px';
d2[i+j].style.top = 40+(i*6)+'px';
}
}
}
//每隔一个换色,4个换一次
$('DivCol').onclick = function () {
for(var i=0; i<100; i+=4){
for(var j=0; j<4; j++){
d2[i+j].style.background = arr[j];
}
}
}
//生成V字DIV
$('DivV').onclick = function () {
$('content').innerHTML = '';
for(var i=0; i<11; i++){
$('content').innerHTML += '<div class="d2">'+i+'</div>';
if(i<6){
d2[i].style.left = 10+(i*60)+'px';
d2[i].style.top = 40+(i*60)+'px';
}else{
d2[i].style.left = 10+(i*60)+'px';
d2[i].style.top = 400-((i-4)*60)+'px';
}
}
}
//生成倒V字DIV
$('DivDv').onclick = function(){
$('content').innerHTML = '';
for(var i=0; i<11; i++){
$('content').innerHTML += '<div class="d2">'+i+'</div>';
if(i<6){
d2[i].style.left = 10+(i*60)+'px';
d2[i].style.top = 340-(i*60)+'px';
}else{
d2[i].style.left = 10+(i*60)+'px';
d2[i].style.top = 40+(i*60)-300+'px';
}
}
}
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<input id="Div100" type="button" value="生成100个DIV">
<input id="Div10" type="button" value="每10个DVI换行">
<input id="DivCol" type="button" value="每隔一个DIV换颜色">
<input id="DivV" type="button" value="生成V">
<input id="DivDv" type="button" value="生成倒V">
<div id="content"></div>
</body>
</html>
