【图题思路】
            
 1.确定图形一共几行,即为外层的循环的次数
 2.确定每行有几种元素,代表有几个内层循环
 3.确定每种元素的个数,即为每个内层循环的次数
Tips:通常,找出每种元素的个数与行号的关系,即为当前内层循环的最大值

长方形:每行循环5次,再循环5行

<script type="text/javascript">
            
            
            for(var a=1;a<=5;a++){
                for(var b=1;b<=5;b++){
                    document.write("*");
                }
                document.write("<br />")
            }
            
            
            
        </script>

直角三角形:类似长方形,只不过行内循环次数与行次相等

<script type="text/javascript">
            
            
            for(var a=1;a<=5;a++){
                for(var b=1;b<=a;b++){
                    document.write("*");
                }
                document.write("<br />")
            }
            
            
            
        </script>

平行四边形:先设计一个随行次增加的空格循环,加在长方形内

<script type="text/javascript">
            
                
            for(var a=1;a<=5;a++){
                for(var c=1;c<a;c++){
                    document.write("&nbsp&nbsp")
                }
                
                for(var b=1;b<=5;b++){
                    document.write("*");
                    
                }
                document.write("<br/>")
                
                
            }
           
        </script>

菱形:分为上下两部分,上面部分类似于平行四边形结构,找到*数目与行次的关系为2n-1,完成上面循环。下半部分将上部分反过来。

<script type="text/javascript">
            
            for(var a = 1;a<=7;a=a+2){
                for(var c=1;c<=(7-a)/2;c++){
                    document.write("&nbsp&nbsp")
                }
                
                
                
                for(var b = 1;b<=a;b=b+1){
                    document.write("1")
                }
                
                document.write("<br />")
            }
            for(var a = 5;a>=1;a=a-2){
                for(var c=1;c<=(7-a)/2;c++){
                    document.write("&nbsp&nbsp")
                }
                for(var b = 1;b<=a;b=b+1){
                    document.write("1")
                }
                document.write("<br />")
            }
            
            
 </script>

数字等边三角形:类似于菱形上半部分,但是要分为左右两个循环,左侧为递增,个数为行次,右侧为递减个数为行次-1

<script type="text/javascript">
            
            var d;
            
            
            for(var a = 1;a<=7;a=a+2){
                for(var c=1;c<=(7-a)/2;c++){
                    document.write("&nbsp&nbsp")
                }
                
                for(var b = 1;b<=(a+1)/2;b=b+1){
                    document.write(b)
                }
                
                for(var b = (a-1)/2;b>=1;b=b-1){
                    document.write(b)
                }
                
                document.write("<br />")
            }
            
            
            
   </script>

九九乘法表

<script type="text/javascript">
            
            document.write("<table border='1px' bordercolor='black' align='center'>" )
            for(var a = 1;a<=9;a++){
                
                document.write("<tr>")
                for(var b =1,c=1,e=b*c; b<=a;b++,c++){
                    document.write("<td>"+b+"*"+c+"="+e+"</td>")
                }
            
                
                document.write("</tr>")
            }
            
            document.write("</table>")
            
            
        </script>

如何用JavaScript制作循环图形的更多相关文章

  1. c#封装DBHelper类 c# 图片加水印 (摘)C#生成随机数的三种方法 使用LINQ、Lambda 表达式 、委托快速比较两个集合,找出需要新增、修改、删除的对象 c# 制作正方形图片 JavaScript 事件循环及异步原理(完全指北)

    c#封装DBHelper类   public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> ...

  2. 如何用iframe标签以及Javascript制作时钟?

    如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...

  3. jQuery插件-jgcharts实现Javascript制作Google Charts

    from:http://www.zz68.net/program/Ajax/2010/0415/1992.html jgcharts是一个基于jQuery的非常经典的Google Charts图表制作 ...

  4. 【百度地图API】——如何用label制作简易的房产标签

    原文:[百度地图API]--如何用label制作简易的房产标签 摘要: 最近,API爱好者们纷纷说,自定义marker太复杂了!不仅定义复杂,连所有的dom事件都要自己重新定义.有没有快速简易创建房产 ...

  5. 一步一步学Silverlight 2系列(22):在Silverlight中如何用JavaScript调用.NET代码

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  6. 编程原理—如何用javascript代码解决一些问题

    关于编程,我最喜欢的就是解决问题.我不相信有谁天生具有解决问题的能力.这是一种通过反复锻炼而建立并维持的能力.像任何练习一样,有一套指导方针可以帮助你更有效地提高解决问题的能力.我将介绍5个最重要的软 ...

  7. javascript之循环保存数值

    javascript之循环保存数值 语言都是相通的,这句话在我学javascript时有的深刻的意识.js中的for循环与java中的for循环有很大相似之处. 先看下面这段代码 for(var i= ...

  8. Python制作统计图形

    转载自:http://www.dcharm.com/?p=15 Python一般使用Matplotlib制作统计图形,用它自己的说法是‘让简单的事情简单,让复杂的事情变得可能’.(你说国外的“码农”咋 ...

  9. JavaScript的循环语句

    JavaScript的循环语句 1.JavaScript的循环语句 (1)for循环语句 - 循环代码块一定的次数: (2)for/in循环语句 - 循环遍历对象的属性: (3)while循环语句 - ...

随机推荐

  1. Entity Framework Core 懒加载

    众所周知在EF 6 及以前的版本中,是支持懒加载(Lazy Loading)的,可惜在EF Core 并不支持,必须使用Include方法来支持导航属性的数据加载.不过现在EF Core的开发团队打算 ...

  2. YUI 和路径相关的参数与module加载之间的关系

    相关参数默认值 使用YUI, 我们可以配置一些和路径相关参数,如base.root.comboBase.cdn, combine.path.fullpath等属性的配置均会影响到YUI的module加 ...

  3. Navicat连接阿里云Mysql遇到的的坑

    连上去那一刻,心态真是起飞了

  4. addslashes() 函数返回在预定义字符之前添加反斜杠的字符串

    . 预定义字符是: 单引号(') 双引号(") 反斜杠(\) NULL 提示:该函数可用于为存储在数据库中的字符串以及数据库查询语句准备字符串. 注释:默认地,PHP 对所有的 GET.PO ...

  5. 高级设置电脑系统windows7防火墙出错代码0×6D9原因与解决技巧

    高级设置windows防火墙能够更好的保护电脑系统安全,在电脑系统windows7设置过程中难免会遇到某些问题,有用户在安装MRGT后想要打开SNMP的161端口,但在打开高级安全windows防火墙 ...

  6. 邓_PHP面试【001】

    1.双引号和单引号的区别 双引号解释变量,单引号不解释变量 双引号里插入单引号,其中单引号里如果有变量的话,变量解释 双引号的变量名后面必须要有一个非数字.字母.下划线的特殊字符,或者用{}讲变量括起 ...

  7. [转]另一种遍历Map的方式: Map.Entry 和 Map.entrySet()

    转自: http://blog.csdn.net/mageshuai/article/details/3523116 今天看Think in java 的GUI这一章的时候,里面的TextArea这个 ...

  8. [one day one question] Vue数组变更不能触发刷新

    问题描述:Vue数组变更不能触发刷新,特别是数组的每个元素都是对象的时候,对象中某个属性的值发生变化,根本无法触发Vue的dom刷新,这怎么破? 解决方案:this.$set(array, index ...

  9. Angular19 自定义表单控件

    1 需求 当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件:自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互 2 官方文档 -> 点击前 ...

  10. 【Code clone】Distributed Code Clone Detection Based on Index

    1 摘要  随着软件产业的发展,代码克隆现象越来越常见,随之带来的安全漏洞.可维护性.产权等问题也引起人们重视.代码克隆按照复制程度分为4类:完全复制.修改名称.更换顺序和自实现.现有的代码克隆检测工 ...