JS随机生成100个DIV每10个换行(换色，生成V字和倒V)

最新推荐文章于 2022-04-15 15:07:10 发布

weixin_30266885

最新推荐文章于 2022-04-15 15:07:10 发布

阅读量575

点赞数

原文链接：http://www.cnblogs.com/liumobai/p/5022601.html

版权

附图

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         #content{margin:20px auto 0px;}
 8         .d2{width:50px;height:50px;color:white;text-align: center;font-size:14px; background:red; line-height:50px; position:absolute; left:10px; top:40px;}
 9     </style>
10     <script>
11         window.onload = function () {
12             var onOff = true;
13             //获取body里面的所有div
14             var d2 = $('content').getElementsByTagName('div');
15             var arr = ['red','blue','black','green'];
16             //生成100个div事件
17             $('Div100').onclick = function(){
18                 $('content').innerHTML = '';
19                 if(onOff){
20                     for(var i=0; i<100; i++){
21                         $('content').innerHTML += '<div class="d2">'+i+'</div>';
22                         d2[i].style.left = 10+(i*60)+'px';
23                     }
24                     onOff = true;
25                 }
26             }
27             //每隔10个换行
28             $('Div10').onclick = function(){
29                 for(var i=0; i<100; i+=10){
30                     for(var j=0; j<10; j++){
31                         d2[i+j].style.left = 10+(j*60)+'px';
32                         d2[i+j].style.top = 40+(i*6)+'px';
33                     }
34                 }
35             }
36             //每隔一个换色,4个换一次
37             $('DivCol').onclick = function () {
38                 for(var i=0; i<100; i+=4){
39                     for(var j=0; j<4; j++){
40                         d2[i+j].style.background = arr[j];
41                     }
42                 }
43             }
44             //生成V字DIV
45             $('DivV').onclick = function () {
46                 $('content').innerHTML = '';
47                 for(var i=0; i<11; i++){
48                     $('content').innerHTML += '<div class="d2">'+i+'</div>';
49                     if(i<6){
50                         d2[i].style.left = 10+(i*60)+'px';
51                         d2[i].style.top = 40+(i*60)+'px';
52                     }else{
53                         d2[i].style.left = 10+(i*60)+'px';
54                         d2[i].style.top = 400-((i-4)*60)+'px';
55                     }
56                 }
57             }
58             //生成倒V字DIV
59             $('DivDv').onclick = function(){
60                 $('content').innerHTML = '';
61                 for(var i=0; i<11; i++){
62                     $('content').innerHTML += '<div class="d2">'+i+'</div>';
63                     if(i<6){
64                         d2[i].style.left = 10+(i*60)+'px';
65                         d2[i].style.top = 340-(i*60)+'px';
66                     }else{
67                         d2[i].style.left = 10+(i*60)+'px';
68                         d2[i].style.top = 40+(i*60)-300+'px';
69                     }
70                 }
71             }
72         }
73         function $(id){
74             return document.getElementById(id);
75         }
76     </script>
77 </head>
78 <body>
79 <input id="Div100"  type="button" value="生成100个DIV">
80 <input id="Div10"  type="button" value="每10个DVI换行">
81 <input id="DivCol" type="button"  value="每隔一个DIV换颜色">
82 <input id="DivV"  type="button" value="生成V">
83 <input id="DivDv"  type="button" value="生成倒V">
84 <div id="content"></div>
85 </body>
86 </html>

转载于:https://www.cnblogs.com/liumobai/p/5022601.html

weixin_30266885

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS随机生成100个DIV每10个换行(换色，生成V字和倒V)

附图 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 #content{ma...
复制链接

扫一扫