JS練習--自動生成100個li

點擊按鈕，自動生成100個li，紅、黃、藍、綠四種顏色的順序顯示出現在頁面中

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;
    margin-right: 10px;
    margin-top: 10px;
    text-align: center;
    line-height: 40px;
    background: yellow;
    font-size: 30px;
}

HTML:

<input id="btn1" type="button" value="自動生成100個Li">
<div>
    <ul id="ul1"></ul>
</div>

JS:

<script type="text/javascript">
    var oBtn=document.getElementById('btn1');
    var oUl=document.getElementById('ul1');
    var aLi=oUl.getElementsByTagName('li');
    var str='';
    var onOff=true;//切換開關
    var arr=['red','yellow','blue','green'];

    oBtn.onclick=function(){
        if (onOff) {
            for (var i = 0; i < 100; i++) {
            str+='<li>'+i+'</li>';
            };
        };
        oUl.innerHTML=str;
        onOff=false;//只能在一次點擊按鈕的時候添加內容
        for (var i = 0; i < aLi.length; i++) {
            var n=i%arr.length;//取模獲得0,1,2,3數字迴圈出現
            aLi[i].style.background=arr[n];
        };
    }
    
</script>