首页 > 代码库 > DOM操作--自动生成100个li（变色版）
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="http://www.mamicode.com/自动生成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++;
}
}
})
})
本文出自 “帅帅” 博客，谢绝转载！
DOM操作--自动生成100个li（变色版）