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). 实体的写法是 ...
随机推荐
- 【BZOJ】1303: [CQOI2009]中位数图（特殊的技巧）
http://www.lydsy.com/JudgeOnline/problem.php?id=1303 依旧是题解流,,,不看题解没法活,,,第一眼就是瞎搞,然后就是暴力,显然TLE..题解啊题解. ...
- MySQL索引分析与优化
1.MySQL能够在name的索引中查找“Mike”值,然后直接转到数据文件中相应的行,准确地返回该行的 peopleid(999).在这个过程中,MySQL只需处理一个行就可以返回结果.如果没有“n ...
- html ul 里 能放其他标签吗，比如h3、p？
按标准的话,ul 里面应该只能放li,不过看见同事有的放了h3.p这些,这样到底可不可以? <ul>里面只能放<li>.但是<li>里面可以放<h*> ...
- li:hover在ie6下失效的解决方案
li:hover在ie6下是无效的,它只在ie7以下版本有效.要解决这个问题有两个解决方法.一个是用js来解决,但是这种方法我不喜欢,因为它必需把js代码和css代码都放在html文件中.第二种是在每 ...
- oracle在线重定义表
在一个高可用系统中,如果需要改变一个表的定义是一件比较棘手的问题,尤其是对于7×24系统.Oracle提供的基本语法基本可以满足一般性修改,但是对于把普通堆表改为分区表,把索引组织表修改为堆表等操作就 ...
- linux ext2 文件系统学习
Linux ext2文件系统理解 硬盘组成: 硬盘由多个圆形硬盘片组成.按照硬盘片能够容纳的数据量分为单盘和多盘.硬盘的数据读取主要靠机械手臂上的磁头,在机械手臂上有多个磁头.机械手臂不动硬盘旋转一 ...
- Hadoop配置文件解析
Hadoop源码解析 2 --- Hadoop配置文件解析 1 Hadoop Configuration简介 Hadoop没有使用java.util.Properties管理配置文件, 也没有使 ...
- [听课笔记]Professor Michael Cusumano's New Book:" Strategy Rules: Five Timeless Lessons from Bill Gates, Andy Grove, and Steve Jobs"
1. Look Forward, Reason Back Extrapolate, interpret, then tie vision to concrete actions2. Make Big ...
- caca393刷PTP教程
http://www.chickenclix.com/ 让大家等急了,最近真是很忙,对不住了:)好了闲话少说开始讲正题,再说可能有人要拍砖了............我们就以http://www ...
- RT-Thread信号量的基本操作
抽象的来讲,信号量的特性如下:信号量是一个非负整数(车位数),所有通过它的线程/进程(车辆)都会将该整数减一(通过它当然是为了使用资源),当该整数值为 0 时,所有试图通过它的线程都将处于等待状态.在 ...