使用JavaScript实现长方形、直角三角形、平行四边形、等腰三角形、倒三角、数字三角形
【循环嵌套的规律】
1、外层循环控制行数，内层循环控制每行中元素的个数。
【图形题思路】
1、确定图形有几行，行数即为外层循环次数；
2、确定每行中有几种元素组成，有几种元素表示有几个内层循环；
3、确定每种元素的个数，这个个数即为每个内层元素循环次数。
如果每种元素的个数不固定，则找出每种元素的个数，与行号的关系，
这个关系表达式即为内循环的最大值。
1、长方形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
*****
*****
*****
*****
*****
*/
for(var i=1;i<=5;i++){
document.write("<br/>");
for(j=1;j<=5;j++){
document.write("*");
}
}
</script>
</body>
</html>
2、直角三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
*
**
***
****
*****
*/
for(i=1;i<=5;i++){
document.write(" "+"<br/>");
for(j=1;j<=i;j++){
document.write("*");
}
}
</script>
</body>
</html>
3、平行四边形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
*****
*****
*****
*****
*****
*/
for(var i=1;i<=5;i++){
document.write("<br/>");
for(var j=1;j<=i-1;j++) {
document.write(" ");
}
for (var k = 1; k <= 5; k++) {
document.write("*");
}
}
</script>
</body>
</html>
4、等腰三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
*
***
*****
*******
*********
*/
for(var i=1;i<=5;i++){
document.write("<br/>");
for(var j=1;j<=5-i;j++) {
document.write(" ");
}
for (var k = 1; k <=2*i-1; k++) {
document.write("*");
}
}
</script>
</body>
</html>
5、倒三角
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
*********
*******
*****
***
*
*/
for(var i=0;i<=5;i++){
document.write("<br/>");
for(var j=0;j<=i;j++) {
document.write(" ");
}
for (var k = 1; k <=2*(5-i)-1; k++) {
document.write("*");
}
}
</script>
</body>
</html>
6、数字三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
1
121
12321
1234321
123454321
*/
for(var i=1;i<=5;i++){
for(var j=1;j<=5-i;j++) {
document.write(" ");
}
var num = 1;
// 递增的数
for(var k=1; k<=i; k++){
document.write(num);
num++;
}
// 递减的数
num -= 2;
for(var l=1; l<=i-1; l++){
document.write(num);
num--;
}
// 回车
document.write("<br>");
}
</script>
</body>
</html>
使用JavaScript实现长方形、直角三角形、平行四边形、等腰三角形、倒三角、数字三角形的更多相关文章
- Html 中select标签的边框与右侧倒三角的去除
首先是边框的去除:可以设置属性border:none;或border:0px; 不过这还是有一个bug,不同浏览器会在选中select标签时,加上一个边框: 之后是右侧倒三角的去除:设置属性 appe ...
- css倒三角的几种实现方式
在网页中,你在很多地方都能看到倒三角,比如tooltips,下拉菜单等.大家有几种方式来实现呢? 1.BASE64编码 图片 假如你已经有了三角形的图片,并且减少HTTP请求,那么将这个图片转换成一个 ...
- 利用overflow实现导航栏中常 出现的倒三角下拉小图标
常用网页界面中,导航栏中的倒三角下拉小图标实现,可用overflow: 效果如右图: .Triangle{position:relative;width:280px;height:15px;} ;ov ...
- css制作倒三角
布局div,并命名为id="dropdown",在style使用border属性对div进行控制 #dropdown{ width:0px; height:0px; border- ...
- div实现返回符,倒三角,椭圆+小知识收集
收集: 1,返回符(伪类元素): .back:before {content: "";width: .3rem;height: .3rem;border-left: .04rem ...
- FineReport——JS二次开发（隐藏下拉框控件的倒三角）
在对FR控件进行二次开发的过程中,需要自定义样式,比如下拉框控件带有自动检索的功能,但是又希望它的显示样式如同文本框一样,这时就需要隐藏多余的部分. 在对在线文档的查阅中可以发现很多选择器适用于多种控 ...
- java实现打印正三角，倒三角
正三角代码: package BasicType; /** * 封装一个可以根据用户传入值来打印正三角的方法 * @author Administrator */ public class Enme ...
- 用js写直角三角形，等腰三角形，菱形
//一. 画一个直角三角形 // 第几行 *号数 // * 1 1 // ** 2 2 // *** ...
- Python 打印矩形、直角三角形、等腰三角形、菱形
# 1)打印一个星号 print('*') #2)打印一行6个星号 * * * * * * for i in range(6): print('*',end=' ') #3)打印6列星号 * * * ...
随机推荐
- HDU 1715 大数java
大菲波数 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- 【链表】在O(1)的时间删除链表的节点
/** * 在O(1)的时间删除链表的节点 * * @author * */ public class Solution { public static void deleteNode(Node he ...
- 解决华为手机用rem单位，内容超出屏幕宽度问题
在H5手机页面上,用rem单位布局,配合js计算出一个根节点的font-size(原理是屏幕宽度乘以一个固定比例,如1/100),之后页面中所有的px全都换算成了rem单位来写,优点是能适配各种不同屏 ...
- [技巧篇]10.那些年我们一起优化过的MyEclipse8.6
这里里面是针对于四海的给位学生预留的视频,请自行下载,我希望对大家有所帮助 我这里使用了百度网盘,这里的东西还是比较多的!如果喜欢请关注我,当好胖先生的粉丝 链接:http://pan.baidu.c ...
- Python爬虫学习笔记之模拟登陆并爬去GitHub
(1)环境准备: 请确保已经安装了requests和lxml库 (2)分析登陆过程: 首先要分析登陆的过程,需要探究后台的登陆请求是怎样发送的,登陆之后又有怎样的处理过程. 如果已经 ...
- [LeetCode] 7. Reverse Integer ☆
Reverse digits of an integer. Example1: x = 123, return 321 Example2: x = -123, return -321 Have y ...
- sql生成一个日期表
SET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGO-- =============================================-- Auth ...
- LightOJ 1319 - Monkey Tradition CRT除数互质版
本题亦是非常裸的CRT. CRT的余数方程 那么定义 则 其中 为模mi的逆元. /** @Date : 2016-10-23-15.11 * @Author : Lweleth (SoungEarl ...
- [SDOI2008]仪仗队 (洛谷P2158)
洛谷题目链接:[SDOI2008]仪仗队 题目描述 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视 ...
- loj6102 「2017 山东二轮集训 Day1」第三题
传送门:https://loj.ac/problem/6102 [题解] 贴一份zyz在知乎的回答吧 https://www.zhihu.com/question/61218881 其实是经典问题 # ...