1 <head> 2 <style> 3 #productlist{ 4 width: 900px; 5 float: left; 6 background-color: #fff; 7 } 8 #productlist ul li{ 9 width: 200px; 10 margin:10px 10px 10px 0px; 11 background-color: red; 12 color: #fff; 13 float: left; 14 list-style: none; 15 display: none; 16 } 17 #productlist ul li:nth-child(odd){ 18 background-color: blue; 19 } 20 </style> 21 </head> 22 <body> 23 <div id="productlist"> 24 <ul id="allul"> 25 <li>aaaaaaa</li> 26 <li>aaaaaaa</li> 27 <li>aaaaaaa</li> 28 <li>aaaaaaa</li> 29 1 30 <li>aaaaaaa</li> 31 <li>bbbbbbb</li> 32 <li>bbbbbbb</li> 33 <li>bbbbbbb</li> 34 2 35 <li>bbbbbbb</li> 36 <li>aaaaaaa</li> 37 <li>aaaaaaa</li> 38 <li>aaaaaaa</li> 39 3 40 <li>aaaaaaa</li> 41 <li>bbbbbbb</li> 42 <li>bbbbbbb</li> 43 <li>bbbbbbb</li> 44 4 45 <li>bbbbbbb</li> 46 <li>bbbbbbb</li> 47 <li>aaaaaaa</li> 48 <li>aaaaaaa</li> 49 5 50 <li>aaaaaaa</li> 51 <li>aaaaaaa</li> 52 <li>bbbbbbb</li> 53 <li>bbbbbbb</li> 54 6 55 <li>bbbbbbb</li> 56 <li>bbbbbbb</li> 57 <li>aaaaaaa</li> 58 <li>bbbbbbb</li> 59 7 60 <li>aaaaaaa</li> 61 <li>aaaaaaa</li> 62 <li>aaaaaaa</li> 63 <li>aaaaaaa</li> 64 8 65 <input type="button" id="show" value="显示" onclick="show()"/> 66 </ul> 67 </div> 68 69 <script> 70 window.onload = function () { 71 //追加事件 72 var input = document.createElement('input'); 73 input.type ='text'; 74 input.id= 'text'; 75 input.value ='0'; 76 input.style.display="none"; 77 document.body.appendChild(input); 78 document.getElementById('show').onclick = function(){ 79 var value = input.value; 80 input.value = value * 1 + 1; 81 //点击显示事件 82 var all=document.getElementById('allul').getElementsByTagName('li'); 83 var beishu=parseInt(all.length/4); 84 var num=document.getElementById('text').value 85 86 for(var i=0;i<beishu*num;i++){ 87 88 all[i].style.display="block"; 89 90 } 91 } 92 } 93 94 </script> 95 </body>