miaov- 自动生成正V反V大于号V小于号V楼梯等图案
1. 核心:控制 数量的长度-1-i的位置,是放在left上还是top上?是放在前面还是后面!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动生成各种图案的小方块</title> <style> *{margin:0; padding: 0;} body{background-color: #cccccc;} .container{width:600px; height:600px; background-color: #fff; margin: 0 auto} .button{position:absolute; margin-left: 1000px; margin-top: -600px;} .button ul{list-style-type: none} .button ul li{display:block; height:40px;background: #069DD5; border-radius: 5px; margin-top: 10px; line-height: 40px;} .button ul li a{text-decoration: none; color:#fff;} #show{list-style-type: none;} #show li{display:block; width:50px; height:50px; position:absolute;text-align: center;margin:5px; line-height: 40px} </style> </head> <body> <script> window.onload = function () { var aBtnLi = document.getElementsByTagName('li'); for(var i = 0; i < aBtnLi.length; i++){ //鼠标移入移出效果 aBtnLi[i].onmouseover = function () { this.style.background = "#272822"; } aBtnLi[i].onmouseout = function () { this.style.background = "#069DD5"; } } var colors = ['red','green','blue','gray','yellow']; var colorLen = colors.length; var oShow = document.getElementById('show'); //1.自动生成10个方块, 每个left增加60px; top值不变 ! var show10 = ''; aBtnLi[0].onclick = function () { oShow.innerHTML = ''; //打扫桌子,等待下桌客人 for(var i = 0; i < 10; i++){ show10 += "<li style='background:"+ colors[i % colorLen] + ";left:" + 60 * (i % 10) +"px;top:" + 60 * parseInt(i / 10)+"px;'>"+ i +"</li>"; } oShow.innerHTML = show10; } //2.自动生成100个方块, i % 10 决定了每行十个; 60 * parseInt(i / 10)决定了第几行 var show100 = ''; aBtnLi[1].onclick = function () { oShow.innerHTML = ''; for(var i = 0; i < 100; i++){ show100 += "<li style='background:"+ colors[i % colorLen]+";left:" + 60 * (i % 10)+ "px;top:" + 60 * parseInt(i / 10)+"px;'>"+ i +"</li>"; } oShow.innerHTML = show100; } //3. 生成阶梯状方块 var stair = ''; aBtnLi[2].onclick = function () { oShow.innerHTML = ''; for(var i = 0; i < 10; i++) { stair += "<li style='background:"+ colors[i % colorLen] + ";left:" + 60 * (i % 10) + "px;top:"+ 60 * i + "px;'>"+ i +"</li>"; } oShow.innerHTML = stair; } //4. 生成正V 核心:上下V 控制top值的变化; var strV = ''; aBtnLi[3].onclick = function () { oShow.innerHTML = ''; for(var i = 0; i < 9; i++) { if ( i < 5) { // left 变大; top值变大 strV += "<li style='background:"+ colors[i % colorLen] + ";left:" + 60 * (i % 10) + "px;top:"+ 60 * i + "px;'>"+ i +"</li>"; } else{ // left变大; top值变小 strV += "<li style='background:"+ colors[i % colorLen] + ";left:" + 60 * (i % 10) + "px;top:"+ 60 * (8 - i) + "px;'>"+ i +"</li>"; } } oShow.innerHTML = strV; } //5. 生成倒V var oppsiteV = ''; aBtnLi[4].onclick = function () { oShow.innerHTML = ""; for(var i = 0; i < 9; i++) { if ( i < 5) { // 围绕5旋转 left变大 top变小 oppsiteV += "<li style='background:"+ colors[i % colorLen] + ";left:" + 60 * (i % 10) + "px;top:"+ 60 * (8 - i) + "px;'>"+ i +"</li>"; } else{ // left变大 top变大 oppsiteV += "<li style='background:"+ colors[i % colorLen] + ";left:" + 60 * (i % 10) + "px;top:"+ 60 * i + "px;'>"+ i +"</li>"; } // if ( i < 5) { //从顶点开始 // oppsiteV += "<li style='background:"+ colors[i % colorLen] + ";left:" + 60 * (i % 10) + "px;top:"+ 60 * (4 - i) + "px;'>"+ i +"</li>"; // } else { // oppsiteV += "<li style='background:"+ colors[i % colorLen] + ";left:" + 60 * (i % 10) + "px;top:"+ 60 * (i - 5) + "px;'>"+ i +"</li>"; // } } oShow.innerHTML = oppsiteV; } //6. 生成大于号V 核心原理:左右V控制的left变化 var greaterThanV = ''; aBtnLi[5].onclick = function () { oShow.innerHTML = ''; for(var i = 0; i < 9; i++) { if ( i < 5) { //前5个 left值变大,top值变大 greaterThanV += "<li style='background:"+ colors[i % colorLen] + ";left:" + 60 * (i % 10) + "px;top:"+ 60 * i + "px;'>"+ i +"</li>"; } else{ //left变小, top变大 greaterThanV += "<li style='background:"+ colors[i % colorLen] + ";left:" + 60 * (8 - i) + "px;top:"+ 60 * i + "px;'>"+ i +"</li>"; } } oShow.innerHTML = greaterThanV; } //7. 生成小于号V var lowerThanV = ''; aBtnLi[6].onclick = function () { oShow.innerHTML = ''; for(var i= 0; i < 9; i++) { if ( i < 5) { //left值变小,top变大 lowerThanV += "<li style='background:"+ colors[i % colorLen] + ";left:" + 60 * (8 - i) + "px;top:"+ 60 * i + "px;'>"+ i +"</li>"; } else { //left值变大,top值变大 lowerThanV += "<li style='background:"+ colors[i % colorLen] + ";left:" + 60 * (i % 10) + "px;top:"+ 60 * i + "px;'>"+ i +"</li>"; } } oShow.innerHTML = lowerThanV; } } </script> <div class="container"> <div style="position: relative"> <ul id="show"></ul> </div> </div> <div class="button"> <ul> <li><a href="#">自动生成10个方块</a></li> <li><a href="#">自动生成100个方块</a></li> <li><a href="#">自动生成阶梯状方块</a></li> <li><a href="#">自动生成正V型方块</a></li> <li><a href="#">自动生成倒V型方块</a></li> <li><a href="#">自动生成>型方块</a></li> <li><a href="#">自动生成<型方块</a></li> </ul> </div> </body> </html>