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

一、效果图。

二、HTML+CSS代码。

<style>
.box{ width:800px; margin:90px auto;}
.btn{ padding:5px 10px; color:#fff; background:#ff6600; cursor:pointer; font-size:16px; border-radius:5px;}
.list{ position:relative; margin-top:20px;}
.list li{ width:50px; height:50px; position:absolute; left:0; top:0;  line-height:50px; text-align:center; font-size:30px; border:1px solid #000;}
</style>

<div class="box">
    <input type="button" value="自动生成100个li" id="btn" class="btn" />
    <ul id="list" class="list"></ul>
</div>

三、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 =$('<li>'+num+'</li>');
                aLi.css('top',i*60);
                $('#list').append(aLi);
                
                if(i<10){
                    aLi.css('left',j*60);
                }
                aLi.css('background',arrCol[num%arrCol.length]);
                num++;
            }
        }
    
    })



})

本文出自 “帅帅” 博客，谢绝转载！