使用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列星号 * * * ...
随机推荐
- [nginx]代理404跳转
1.nginx作为反向代理,如果代理请求的页面不存在,返回404,但是浏览器中一片空白. 要求:将404跳转到指定页面. 在server段添加: error_page 404 /; 不能生效,原因是需 ...
- JQuery学习三(隐式迭代和节点遍历)
在JQuery中根据id获取控件,如果输入id错误是不报错的. 必要时可以通过写判断语句进行判断是否id写错 <!DOCTYPE html> <html xmlns="ht ...
- Moodle简介
Moodle简介 一．概述 Moodle是Modular Object-Oriented Dynamic Learning Environment(模块化面向对象动态学习环境)的简称,中文译名为魔灯, ...
- [LeetCode] 21. Merge Two Sorted Lists ☆
Merge two sorted linked lists and return it as a new list. The new list should be made by splicing t ...
- 【poj1222-又一道开关问题】高斯消元求解异或方程组
题意:给出一个5*6的图,每个灯泡有一个初始状态,1表示亮,0表示灭.每对一个灯泡操作时,会影响周围的灯泡改变亮灭,问如何操作可以使得所有灯泡都关掉. 题解: 这题和上一题几乎完全一样..就是要输出解 ...
- 【HDU】5269 ZYB loves Xor I
[算法]trie [题解] 为了让数据有序,求lowbit无法直接排序,从而考虑倒过来排序,然后数据就会呈现出明显的规律: 法一:将数字倒着贴在字典树上,则容易发现两数的lowbit就是它们岔道结点的 ...
- Bagging和Boosting 概念及区别（转）
Bagging和Boosting都是将已有的分类或回归算法通过一定方式组合起来,形成一个性能更加强大的分类器,更准确的说这是一种分类算法的组装方法.即将弱分类器组装成强分类器的方法. 首先介绍Boot ...
- ctsc&apio2018八日游
day0: 早就知道自己是打酱油的..早就做好了打铁的准备.. Q:那你来干嘛 A:当然是来玩啊!!玩啊!啊!! emmmmm 抱着半期考不及格的卷子瑟瑟发抖地上了飞机. day1:报道!当然还有在宾 ...
- selenium 点击浏览器按钮
利用以下的方法,selenium 也可以模拟点击各种浏览器按钮:browser.back()点击“返回”按钮.browser.forward()点击“前进”按钮.browser.refresh()点击 ...
- c++设计模式系列----单例模式（Singleton模式
单例模式是为了解决唯一对象实例问题而提出来的,许多时候整个系统只需要拥有一个全局对象,这样有利于我们协调系统整体的行为.比如在某个服务器程序中,该服务器的配置信息存放在一个文件中,这些配置数据由一个单 ...