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). 实体的写法是 ...
随机推荐
- FFT模板
我终于下定决心学习FFT了. orzCHX,得出模板: #include<cstdio> #include<cctype> #include<queue> #inc ...
- RSA密钥的生成与配置
openssl下载地址http://dldx.csdn.net/fd.php?i=20313208579480&s=ac2e809e168f7d5b8bf1515d3d6b1aa4,或者官方下 ...
- 一致性 hash 算法
consistent hashing 算法早在 1997 年就在论文 Consistent hashing and random trees 中被提出,目前在 cache 系统中应用越来越广泛: 1 ...
- QCheckBox 的按钮响应
Qt中QCheckBox的按键响应如下,其中checkbox为对象名: void YourClass::on_checkbox_toggled(bool state) { // Do somethin ...
- Grunt - 前端开发所见即所得
首先要安装全局的grunt-cli sudo npm install grunt-cli -g 1,项目中初始化npm文件,项目名不要和[关键词]如grunt重复,一直回车即可 npm init 2, ...
- Leetcode | N-Queens I & II
N-Queens I The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no ...
- Ubuntu 12.04 LTS 及ubuntu14.10 -- NFS安装
在Linux 服务器上配置好NFS 根文件系统后,在单板侧挂载NFS 文件系统,具体操作如下:ifconfig eth0 hw ether 00:10:85:18:01:84 /*配置MAC地址*/i ...
- FZU 2032 高精度小数加法
题目描写很没意思..就是说给出n个小数 求它们的总和 因为给出的小数点后最多16位而要求保存至12位 而能直接使用的最精确的double只能到12位 于是13的进位可能被忽略 于是不可以用double ...
- PHP 错误与异常 笔记与总结（12 ）异常
① 异常的概念:异常和错误的区别 PHP 部分借鉴了 C++ 和 JAVA 中的异常处理机制.PHP 中的异常是指 程序运行和预期不太一致,与错误是两个不同的概念. ② 异常的语法结构 [例1] &l ...
- MySQL 使用explain查看执行计划
使用explain查看执行计划, 下面是针对这两条语句进行分析,其查询结果是一样的. EXPLAIN select n.id,n.title from info n inner join info_t ...