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. 生成倒Vvar 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. 生成小于号Vvar 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>

转载于:https://www.cnblogs.com/bravolove/p/6108842.html

miaov- 自动生成正V反V大于号V小于号V楼梯等图案相关推荐

html 小于号乱码,shell重定向（大于号，小于号，左右，21，）
一. -e表示只要filename存在,则为真,不管filename是什么类型,当然这里加了!就取反额外的一些 -e filename 如果 filename存在,则为真 -d filename 如 ...
MyBatis中大于号以及小于号的表达方式
MyBatis中大于号以及小于号的表达方式实现方案以下介绍两种可行方法: 转义法大于:> 相当于 > 小于:< 相当于 < 大于等于:>= 相当于 >= 小于 ...
linux 命令详解大于号_大于号与小于号_笨办法学Bash Shell编程-基础篇视频课程_Linux视频-51CTO学院...
聪明人下笨功夫.本课程所倡导"笨办法"的核心是: ● 手动输入所有代码,不要复制粘贴! ● 正确地输入所有代码,也包括注释 ● 运行代码并保证产生相同的输出 ● 如果出现了bug, ...
MyBatis SQL里的大于号、小于号
MyBatis mapper文件是xml文件,需要特殊字符如大于号.小于号后需要转义. 原字符转义后字符 < < <= <= > > >= >=
关于mybatis中的大于号和小于号的错误
项目场景: 运用于再mybatis使用大于号或小于号进行数据查询问题描述: 再mybatis写日期查询时,查询的使两个时间段中的数据,但是再sqlyog中写完查询语句并测试没一点儿问题,可是把代码放 ...
如何在HTML页面中编写大于号和小于号？（HTML实体）
1.HTML实体在HTML中,我们是不能直接使用大于号">"和小于号"<"的,因为浏览器会将这些当作标签进行处理,这样一来就不能正常显示,所以 ...
4和2大于号小于号箭头那边_认识﹥﹤=(大于号、小于号和等号)，会用符号表示两个数的大小导学案(青岛版一年级上册)...
2010至2011上学期一年级数学教师:石云霞学习内容第12页信息窗3. 学习目标 1.借助"拔河"的情境感受数量之间的大.小以及相等的关系.学会用一一对应的方法操作学具来 ...
mybatis 使用大于号和小于号
mapper文件不识别>和<,可以使用<![CDATA[ 和 ]]> 把sql语句括起来,这样就能使用大于号和小于号了. 如:<![CDATA[ select * fr ...
Mybatis中大于号和小于号表示方式
文章目录一.使用场景二.使用转义方式实现大于小于号的表示(等号不需要转义) 三.使用标记方式实现大于小于号的表示一.使用场景使用Mybaits进行SQL查询时候,无法避免要用到大于号和小于号, ...
java字大于号问号_cad中大于号和小于号都显示为问号我怎么才能知到这种情况是缺少什么字体？希望知道的大师指点...
cad中大于号和小于号都显示为问号我怎么才能知到这种情况是缺少什么字体? 希望知道的大师指点以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们 ...

miaov- 自动生成正V反V大于号V小于号V楼梯等图案

miaov- 自动生成正V反V大于号V小于号V楼梯等图案相关推荐

最新文章

热门文章