第一个实例：
<!DOCTYPE html> <html lang="en"> <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" id="btn" /> <ul id="list"></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 id="box"> </div> </body> </html>
第三个实例：鼠标经过显示div层
<!DOCTYPE html> <html lang="en"> <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 id="box"> <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 style="clear:both;"></div> </div> </body> </html>