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). 实体的写法是 ...
随机推荐
- 【Vijos】1792 摆花
题目链接:https://vijos.org/p/1792 算法:DP 看到这题真的一点不会...只能爆搜一下..但太太慢了..看了题解后,听说是分组背包??不知道.. 好吧,,还是百度了下题解,渐渐 ...
- 低调的华丽，Windows Server 2003 ... 写给厌倦了XP,但又纠结于vista/win7花哨的童鞋(转)
发布于2001年10月25日的windows XP 距今已近8年 时间, 微软从没有一个操作系统能像XP那样 坚挺这么久,婚姻既有7年之痒,何况用了8年XP的广大 同学,但07年发布的vista似乎 ...
- JS中Date对象getYear(）方法和getFullYear()方法区别
释义 JavaScript getFullYear() 方法 getFullYear() 方法可返回一个表示年份的 4 位数字. getYear() 语法 dateObject.getFullYear ...
- SQL中distinct的用法（转自博主：Rain Man）
在表中,可能会包含重复值.这并不成问题,不过,有时您也许希望仅仅列出不同(distinct)的值.关键词 distinct用于返回唯一不同的值. 表A: 示例1 select distinct nam ...
- Javascript Math ceil()、floor()、round()三个函数的区别
Round是四舍五入的...Ceiling是向上取整..float是向下取整. ceil():将小数部分一律向整数部分进位. 如: Math.ceil(12.2)//返回13 Math.ceil(12 ...
- hdu Wooden Sticks
这题是暴力加贪心,算是一道水题吧!只要把l和w从小到大排个序就行了... #include"iostream" #include"stdio.h" #inclu ...
- BZOJ 2120 数颜色（带修改的莫队）
2120: 数颜色 Time Limit: 6 Sec Memory Limit: 259 MB Submit: 3478 Solved: 1342 [Submit][Status][Discus ...
- Yii源码阅读笔记（二）
接下来阅读BaseYii.php vendor/yiisoft/yii2/BaseYii.php—— namespace yii; use yii\base\InvalidConfigExceptio ...
- Nginx部署ThinkPHP项目的办法
thinkphp config配置: ', //URL模式 nginx rewrite配置: location / { if (!-e $request_filename) { rewrite ^(. ...
- [转]SQLBulkCopy使用
SQLBulkCopy,用于数据库之间大批量的数据传递.通常用于新,旧数据库之间数据的更新.即使表结构完全不同,也可以通过字段间的对应关系,顺利的将数据导过来. 首先,SQLBulkCopy需要2个连 ...