【循环嵌套的规律】
    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("&nbsp;");

                    }

                    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("&nbsp;");

                 }

                 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("&nbsp;");

                 }

                 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("&nbsp;");

                 }

                 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实现长方形、直角三角形、平行四边形、等腰三角形、倒三角、数字三角形的更多相关文章

  1. Html 中select标签的边框与右侧倒三角的去除

    首先是边框的去除:可以设置属性border:none;或border:0px; 不过这还是有一个bug,不同浏览器会在选中select标签时,加上一个边框: 之后是右侧倒三角的去除:设置属性 appe ...

  2. css倒三角的几种实现方式

    在网页中,你在很多地方都能看到倒三角,比如tooltips,下拉菜单等.大家有几种方式来实现呢? 1.BASE64编码 图片 假如你已经有了三角形的图片,并且减少HTTP请求,那么将这个图片转换成一个 ...

  3. 利用overflow实现导航栏中常 出现的倒三角下拉小图标

    常用网页界面中,导航栏中的倒三角下拉小图标实现,可用overflow: 效果如右图: .Triangle{position:relative;width:280px;height:15px;} ;ov ...

  4. css制作倒三角

    布局div,并命名为id="dropdown",在style使用border属性对div进行控制 #dropdown{ width:0px; height:0px; border- ...

  5. div实现返回符,倒三角,椭圆+小知识收集

    收集: 1,返回符(伪类元素): .back:before {content: "";width: .3rem;height: .3rem;border-left: .04rem ...

  6. FineReport——JS二次开发（隐藏下拉框控件的倒三角）

    在对FR控件进行二次开发的过程中,需要自定义样式,比如下拉框控件带有自动检索的功能,但是又希望它的显示样式如同文本框一样,这时就需要隐藏多余的部分. 在对在线文档的查阅中可以发现很多选择器适用于多种控 ...

  7. java实现打印正三角，倒三角

    正三角代码: package BasicType; /** * 封装一个可以根据用户传入值来打印正三角的方法 * @author Administrator */ public class Enme ...

  8. 用js写直角三角形，等腰三角形，菱形

    //一. 画一个直角三角形     // 第几行   *号数     // *        1        1       // **       2        2     // ***    ...

  9. Python 打印矩形、直角三角形、等腰三角形、菱形

    # 1)打印一个星号 print('*') #2)打印一行6个星号 * * * * * * for i in range(6): print('*',end=' ') #3)打印6列星号 * * * ...

随机推荐

  1. AIDL 简单实现

    实现步骤1.建立一个aidl文件,在里面定义好接口,注意里面不能写public修饰符,同接口一样,包名要一致. package com.systemset.aidl; interface ILight ...

  2. 实现一个简单的Vue插件

    我们先看官方文档对插件的描述 插件通常会为 Vue 添加全局功能.插件的范围没有限制--一般有下面几种: 1.添加全局方法或者属性,如: vue-custom-element 2.添加全局资源:指令/ ...

  3. IE8动态创建CSS

    IE8动态创建CSS 最近在项目中用到在页面中动态创建CSS方法,记录一下方便以后查看 一. 在IE下动态创建(网上收集3种方法,最后一个方法未测试成功,具体不知道什么原因) 第一种(此方法很麻烦,需 ...

  4. spring事务的一些注意点

    参考文章 http://blog.csdn.net/qq_34021712/article/details/75949779   ©王赛超 1.在需要事务管理的地方加@Transactional 注解 ...

  5. eclipse如何远程debug/断开远程debug

    eclipse如何远程debug? 当你的代码已经部署到生产或者测试环境的时候,你如何debug判断线上的问题呢? debug之前必须保证本地代码和远程代码完全一致,否则将不能建立连接 在eclips ...

  6. android:process结合activity启动模式的一次实践

    会有这样的场景,一个应用崩溃了,而导致的该应用崩溃的原因是,该应用占用的内存大小超过了系统分配给它的最大堆大小.对象的分配,是发生在堆(heap)上面的,系统分配给每个应用的最大堆大小是固定的. 假设 ...

  7. bzoj 2276: [Poi2011]Temperature——单调队列

    Description 某国进行了连续n天的温度测量,测量存在误差,测量结果是第i天温度在[l_i,r_i]范围内. 求最长的连续的一段,满足该段内可能温度不降 第一行n 下面n行,每行l_i,r_i ...

  8. 【HNOI】五彩斑斓 模拟

    [题目描述] 给定一个n*m的矩阵,矩阵的某些位置有一个颜色(可以没有颜色,即为0),现在你可以将矩阵的某一行或者某一列染成同一种颜色,问最少用多少步能达到目标矩阵的染色方案,输出最少步数和方案. [ ...

  9. Mojo_1_第一个简单例子

    use Mojolicious::Lite; #根目录,Get方法打开 #正接显示文本text get '/' => sub{ my $service = shift; $service-> ...

  10. in_device结构和in_ifaddr结构

    /* ip配置块 */ struct in_device { /* 二层设备 */ struct net_device *dev; /* 引用计数 */ atomic_t refcnt; /* 是否正 ...