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>
miaov- 自动生成正V反V大于号V小于号V楼梯等图案的更多相关文章
- C#怎样处理xml文件的大于号和小于号等常用符号（xml符号引发的程序错误）
在程序中由xml配置而成的sql语句要转换为C#支持的sql语句 <settings> <select> a.*</select> <from> (se ...
- JSP中EL很常用，怎样使用大于号、小于号、等于号等
JSP中EL很常用,怎样使用大于号.小于号.等于号等 符号 在EL中使用 常规 1 等于 eq == 2 不等于 ne != 3 大于 gt > 4 小于 lt < 5 大于等于 ge ...
- mybatis大于号，小于号，去地址符，单引号，双引号转义说明
在mybatis中,使用到大于号,小于号,与在SQL编辑器中是不一样的. SELECT * FROM test WHERE 1 = 1 AND start_date <= CURRENT_DAT ...
- xml文件sql中大于号、小于号、等号的转义问题
1.用小于或小于等于的场景 代码1: <delete id="delOvertimeLog" parameterType="java.lang.Integer&qu ...
- Mybaits: MyBaits的xml文件中大于号和小于号的转义
< 小于号 < > 大于号 & & 和 & ' 单引号 ' " 双引号 "
- shell重定向（大于号，小于号，左右，2>&1，&）
本文的例子部分是引用网络上的一篇文章. Linux的IO输入输出有三类 Standard Input 代码 0 Standard Output 代码 1 Standard Error 代码 2 举个例 ...
- mybaits中xml文件大于号和小于号的处理方法
1.转义字符 原符号 < <= > >= & ' " 替换符号 < <= > >= & ' " 2 ...
- mybatis xml中不能直接用大于号、小于号要用转义字符
2.使用 <![CDATA[ ]]>标记
- C++ class内的 < 和 > 重载，大于号，小于号，重载示例。
#include <iostream> // overloading "operator = " outside class // < 和 > 是二元操作符 ...
- html中代替空格、大于号、小于号等字符编码
数字表示法的不方便之处,在于必须知道每个字符的码点,很难记忆.为了能够快速输入,HTML 为一些特殊字符,规定了容易记忆的名字,允许通过名字来表示它们,这称为实体表示法(entity). 实体的写法是 ...
随机推荐
- 配置当前用户使用豆瓣pip源
配置当前用户使用豆瓣pip源 mkdir ~/.pip/ cat ~/.pip/pip.conf [global] index-url = http://pypi.douban.com/simpl ...
- MatLab 组件大全
MATLAB 矩阵实验室 7.0.1 Simulink ...
- kail-linux 安全之旅
一些学习网站 http://xiao106347.blog.163.com/blog/static/2159920782013111995945233/ http://xiao106347.blog. ...
- HDU 1044 Collect More Jewels（BFS+DFS）
Collect More Jewels Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Othe ...
- Excel中如何在两个工作表中查找重复数据
有时我们可能会在两种工作表中查找重复记录,当数据记录很多时,就必须通过简单的方法来实现.下面小编就与大家一起分享一下查看重复记录数据的方法,希望对大家有所帮助. 方法/步骤 为了讲解的需要,小编特 ...
- SiteMesh装饰器使用总结
SiteMesh是一个Java WEB项目的网页布局和修饰框架.使用SiteMesh后就不再需要在每个页面中都用<jsp:include>标签引入页头.页尾.导航等其他公用页面了. 可以将 ...
- Frenetic HelloSDNWorld
Follow Frenetic-Github HelloSDNWorld 实验环境: Frenetic虚拟机: 实验步骤: 1.Start up a terminal window - – two a ...
- ExpandableListView实现子Item的点击事件
在继承的BaseExpandableListAdapter的ExpandableListView的Adapter中,重写以下方法 @Override public boolean isChildSel ...
- Sublime Text3注册码（可用）
Sublime Text3注册码(可用) (2014-12-20 21:24:56) 转载▼ 标签: sublime sublime3 sublimetext sublimetext3 分类: 实用工 ...
- General Questions:Front-end Developer Interview Questions
What did you learn yesterday/this week? Learning Angular. What excites or interests you about coding ...