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】1191: [HNOI2006]超级英雄Hero（二分图匹配）
http://www.lydsy.com/JudgeOnline/problem.php?id=1191 一眼题,笑嘻嘻地写了匈牙利,提交..WA了?不科学!!!!!数组小了??不思考了,改大提交,. ...
- 【Vijos】1218 数字游戏
题目链接:https://vijos.org/p/1218 算法:环形DP+划分型DP 环形DP的思路很简单,将1~n中每一个节点当成起点进行划分型DP即可,关于划分型DP前面论文有介绍~查找tag把 ...
- COJ976 WZJ的数据结构（负二十四）
试题描述 输入一个字符串S,回答Q次问题,给你l,r,输出从Sl--Sr组成的串在S中出现了多少次. 输入 第一行为一个字符串S.第二行为一个正整数Q.接下来Q行每行为l,r. 输出 对于每个询问,输 ...
- python3环境搭建（CentOS7.2）
安装python3(自动安装pip3):yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqli ...
- 免杀ASP一句话
<% wei="日日日)""wei""(tseuqer lave 日" execute(UnEncode(wei)) function ...
- 支持nmap批量漏洞扫描的script
NSE脚本,会在NMAP扫描时,通过-sV发现的端口详细信息对应到CVE相应的漏洞: nmap -sS -sV --script=vulscan www.scip.ch -p25 下面是该脚本的说明和 ...
- Eclipse代码提示功能是不是利用反射
希望看到这个空文章的你能够说说你的意见………………
- 3. Configure the Identity Service
Controller Node: 安装认证服务: 1. sudo apt-get install keystone 2. sudo vi /etc/keystone/keystone.conf [ ...
- 使用Powershell取出属于某些指定组的用户并导出为csv
知识这东西就像雪球,越滚越大,今天看到了这篇自己1年多前写的博文,简直弱爆了.于是更新一下程序: 2016-6-15更新,短短几行代码,就拿到了组和组成员,其中还用到了递归,以处理组成员是组的情况: ...
- 【转】TCP协议中的三次握手和四次挥手(图解)
http://blog.csdn.net/whuslei/article/details/6667471