使用JS输出100个按钮

1、点击按钮，自动生成100个li，红、黄、蓝、绿四种颜色的顺序显示出现在页面中

2、CSS:*{padding: 0;margin: 0;}ul,li{list-style: none;}#ul1{position: relative;}#ul1 li{ width: 48px; height: 48px; border: 1px solid #ccc; float: left;

3、margin-right: 10px; margin-top: 10px; text-align: center; line-height: 40px; background: yellow; font-size: 30px; }

4、<script type="text/javascript"> var oBtn=document.get呶蓟鹭毵ElementById('btn1'); var oUl=document.getElementById('ul1'); var aLi=oUl.getElementsByTagName('li'); var str='';

5、var onOff=true;//切换开关 箪滹埘麽var arr=['red','yellow','blu髫潋啜缅e','green']; oBtn.onclick=function(){ if (onOff) { for (var i = 0; i < 100; i++) { str+='<li>'+i+'</li>'; }; }; oUl.innerHTML=str; onOff=false;

6、//只能在一次点击按钮的时候添加内容 for (var i = 0; i < aLi.length; i++) { var n=i%arr.length;//取模获得0,1,2,3数字循环出现 aLi[i].style.background=arr[n]; }; } </script>