DOM操作--自动生成100个li（变色版）

一、效果图。

二、HTML+CSS代码。

    
   

三、javaScript代码。

window.onload = function(){

    var oBtn = document.getElementById('btn');
    var oUl =document.getElementById('list');
    var aLi =oUl.getElementsByTagName('li');
    var onOff = true;
    
    
    var arrCol =['red','yellow','blue','green'];
    var num =0;
    
    oBtn.onclick = function(){
        
        if(onOff){
            for(var i=0;i<10;i++){
                for(var j=0;j<10;j++){
                    var aLi =document.createElement('li');
                    aLi.style.top=(i*60)+'px';
                    oUl.appendChild(aLi);
                    
                    if(i<10){
                        aLi.style.left=(j*60)+'px';    
                    }
                    aLi.style.background=arrCol[num%arrCol.length];
                    aLi.innerHTML=num;
                    num++;
                    
                }
                
            }
            
            
            
            onOff =false;
        }
                
        
                
    };
   
}

四、jquery代码。

$(function(){
    
    var num=0;
    var arrCol =['red','yellow','blue','green'];

    $('#btn').one('click',function(){
    
        for(var i=0;i<10;i++){
            for(var j=0;j<10;j++){
                
                var aLi =$('

'+num+'

');
                aLi.css('top',i*60);
                $('#list').append(aLi);
                
                if(i<10){
                    aLi.css('left',j*60);
                }
                aLi.css('background',arrCol[num%arrCol.length]);
                num++;
            }
        }
    
    })



})