效果图如下：
代码如下：
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>自动生成10个li</title> | |
| <style> | |
| ul li{ | |
| width: 50px; | |
| height: 50px; | |
| float: left; | |
| font-size: 30px; | |
| background: red; | |
| color: #fff; | |
| list-style: none; | |
| text-align: center; | |
| line-height: 50px; | |
| margin-top:50px; | |
| margin-left: 20px; | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <input type="button" value="自动生成10个li" id="btn"> | |
| <ul> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| </ul> | |
| <script type="text/javascript"> | |
| var btn=document.getElementById('btn'); | |
| var li=document.getElementsByTagName('li'); | |
| var str=''; | |
| var j=0; | |
| btn.onclick=function(){ | |
| for(var i=0;i<li.length;i++){ | |
| li[i].innerHTML=i; | |
| li[i].style.display="block"; | |
| if(i%4==0){ | |
| li[i].style.background='blue'; | |
| }else if(i%4==1){ | |
| li[i].style.background='pink'; | |
| }else if(i%4==3){ | |
| li[i].style.background='yellow'; | |
| } | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
效果图如下：
代码如下：
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>自动生成10个li</title> | |
| <style> | |
| li{ | |
| width: 50px; | |
| height: 50px; | |
| float: left; | |
| font-size: 30px; | |
| background: red; | |
| color: #fff; | |
| list-style: none; | |
| text-align: center; | |
| line-height: 50px; | |
| margin-left: 20px; | |
| position: absolute; | |
| left:0; | |
| top: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <input type="button" value="自动生成100个li" id="btn"> | |
| <script type="text/javascript"> | |
| window.onload=function(){ | |
| var btn=document.getElementById('btn'); | |
| btn.onclick=function(){ | |
| var li=document.getElementsByTagName('li'); | |
| var str=''; | |
| var arr=['red','blue','yellow','pink']; | |
| for(var i=0;i<100;i++){ | |
| str='<li>'+(i+1)+'</li>'; | |
| document.body.innerHTML+=str; | |
| } | |
| for(var i=0;i<100;i+=10){ | |
| for(var j=0;j<10;j++){ | |
| li[i+j].style.left=10+70*j+"px"; | |
| li[i+j].style.top=50+7*i+"px"; | |
| } | |
| } | |
| for(var i=0;i<100;i+=4){ | |
| for(var j=0;j<4;j++){ | |
| li[i+j].style.background=arr[j]; | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |