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

一、效果图。

二、HTML+CSS代码。

.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;}

三、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++;

}

}

})

})