javascript基础——自动生成100个li
第一个实例：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8" />
<title>自动生成100个Li</title>
<style>
body ,ul{margin: 0;}
#list{ list-style: none; padding: 0; width: 650px; position: relative;}
#list li{ width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 25px; border: 1px solid #333; position: absolute; left: 0; top: 10px;}
.bgRed{ background: red;}
.bgOrange{ background: orange;}
.bgGreen{ background: green;}
.bgBlue{ background: blue;}
</style>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn');
var oUl = document.getElementById('list');
var arrClass = ['bgRed','bgOrange','bgBlue','bgGreen'];
var str = '';
oBtn.onclick = function(){
for(var i = 0; i<10; i++){
var top = 10 + 60*i + 'px';
for(var j = i*10; j<i*10+9; j++){
var left = 10 + 60*(j%10) + 'px';
str += '<li style = "left:'+ left +'; top:'+ top +';" class="'+ arrClass[j%arrClass.length] +'"> '+j+' </li>'
}
}
oUl.innerHTML = str;
};
};
</script>
</head>
<body>
<input type="button" value="自动生成100个Li" />
<ul ></ul>
</body>
</html>中间JS代码分析如下：
oBtn.onclick = function(){
for(var i = 0; i<10; i++){
//每次循环 i 的值为 0,1,2,3,4,5,6,7,8,9
//总共循环10次，能循环出10排，计算出每一排的top值为：10,70,130,190,250,310,370,430,490,550,
var top = 10 + 60*i + 'px';
//每一排的top计算后，开始计算每一排10个div的left值
//每次循环j的初始值为：0,10,20,30,40,50,60,70,80,90
for(var j = i*10; j<i*10+9; j++){
//每循环一次都会记下来这一排的left值
//j%10 ，始终是0,1,2,3,4,5,6,7,8,9
//每一排div的left的值为：10px,70px,130px,190px,250px,310px,370px,430px,490px
var left = 10 + 60*(j%10) + 'px';
console.log(left);
str += '<li style = "left:'+ left +'; top:'+ top +';" class="'+ arrClass[j%arrClass.length] +'"> '+j+' </li>'
}
}
oUl.innerHTML = str;
};另外一个类似实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>for循环生成100个div课后练习</title>
</head>
<style>
#box{ width: 520px; height: 520px; margin: 30px auto; border: 10px solid #877D7E; background: url(img/pic.jpg); background-size: 520px 520px; position: relative; z-index: 1; }
#box div{ width: 50px; height: 50px; border: 1px solid #F1EEEE; text-align: center; line-height: 50px; font-size: 20px; color: #fff; position: absolute; top: 0; left: 0; z-index: 2;}
</style>
<script>
window.onload = function(){
// 获取相关元素
var oDiv = document.getElementById('box');
var j=-1;
// 循环遍历100个div，并插入到外层oDiv里面
for(var i=0; i<100; i++){
oDiv.innerHTML += '<div>' + i + '</div>';
}
// 获取所有的小div
var aDiv = oDiv.getElementsByTagName('div');
// 循环遍历所有小div，判断i和j之间的关系
for (var i = 0; i < aDiv.length; i++) {
// 判断i逢10，j自增
if(i%10==0){
j++;
}
// 设置所有小div的样式：left值、top值以及背景位置
aDiv[i].style.left = 52*(i%10) + 'px';
aDiv[i].style.top = 52*j + 'px';
aDiv[i].style.backgroundPosition = 52*(i%10) + 'px' + -52*j + 'px';
// 当鼠标经过每一个小div时，将它隐藏不显示
aDiv[i].onmouseover = function(){
this.style.display = 'none';
};
}
};
</script>
<body>
<div >
</div>
</body>
</html>第三个实例：鼠标经过显示div层
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>鼠标经过显示div层</title>
<style>
body ,h3 ,ul{ margin: 0; padding: 0;}
ul{ list-style: none;}
.clearfix{ clear:both; display:block; content:""; visibility:hidden; height:0;}
.clearfix:after{ *zoom:1;}
#box{ width: 500px; margin: 100px auto; border: 1px solid #eee;}
#box h3{ font-size: 16px; height: 40px; line-height: 40px; padding-left: 10px; border-bottom: 1px dashed #ddd;}
.list{ padding-left: 10px;}
.list li img{ width:60px; height:84px;}
.list li{ float: left; width: 80px; text-align: center; padding-top: 10px; cursor: pointer; position: relative; }
.show{ display: none; width:230px; height:138px; left: 30px; bottom: 72px; background: #ccc; position: absolute; z-index: 1;}
</style>
<script>
window.onload = function(){
// 获取相关元素
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
for (var i = 0; i < aLi.length; i++) {
// 鼠标移入显示层
aLi[i].onmouseover = function(){
var oShow = this.getElementsByTagName('div')[0];
oShow.style.display = 'block';
};
// 鼠标移出隐藏层
aLi[i].onmouseout = function(){
var oShow = this.getElementsByTagName('div')[0];
oShow.style.display = 'none';
};
}
};
</script>
</head>
<body>
<div >
<h3>最新上线</h3>
<ul class="list" class="clearfix">
<li>
<img src="img/icon.png" />
<div class="show" ><img src="img/layer.png" /></div>
</li>
<li>
<img src="img/icon.png" />
<div class="show"><img src="img/layer.png" /></div>
</li>
<li>
<img src="img/icon.png" />
<div class="show"><img src="img/layer.png" /></div>
</li>
<li>
<img src="img/icon.png" />
<div class="show"><img src="img/layer.png" /></div>
</li>
<li>
<img src="img/icon.png" />
<div class="show"><img src="img/layer.png" /></div>
</li>
<li>
<img src="img/icon.png" />
<div class="show"><img src="img/layer.png" /></div>
</li>
<li>
<img src="img/icon.png" />
<div class="show"><img src="img/layer.png" /></div>
</li>
<li>
<img src="img/icon.png" />
<div class="show"><img src="img/layer.png" /></div>
</li>
<li>
<img src="img/icon.png" />
<div class="show"><img src="img/layer.png" /></div>
</li>
<li>
<img src="img/icon.png" />
<div class="show"><img src="img/layer.png" /></div>
</li>
<li>
<img src="img/icon.png" />
<div class="show"><img src="img/layer.png" /></div>
</li>
<li>
<img src="img/icon.png" />
<div class="show"><img src="img/layer.png" /></div>
</li>
</ul>
<div ></div>
</div>
</body>
</html>