一.   正方形

a)   在第一个for循环中控制,一共输出几行.依靠的是,每次输出一行,就会在后面输出一个换行符<br>;

b)   在第二个for循环中控制每行输出几个五角星.这样的话,就可以每一行中打印10个五角星.

c)   当i=0;时,进入第一个循环,然后给j赋值为0,就会进入第二个循环,开始打印.打印10 个之后,结束第二个for循环,打印一个换行符.此时第一行的五角星就打印完毕了.

d)   以此类推,打印10行.因为每行打印10个,进而形成了正方形.

注:为什么小于10,反而打印10个?

因为当i=0;时进行了打印,9的时候,也进行了打印.0-9为10个数字.

          for (var i = 0 ; i < 10 ; i++) {
for (var j = 0 ; j < 10 ; j++) {
document.write("☆");
}
document.write("<br />")
}

二.   三角形_左下.

a)   同样,第一行控制打印了多少行.依旧打印了10行,i的值为0-9;

b)   j的判断条件为j<=i,j用来控制打印了多少个,当i等于0的时候,j成立的条件只有第一个j=0的时候,也就只能打印一个.然后打印换行符,当i等于1的时候,j成立的条件有两个,0和1,就在第二行打印了两个.

c)   也就说,每一行打印的个数,等于这一行所在的行数.比如:第一行就打印1个,第二行就打印两个.以此类推.

d)   j<=i与j<i的区别:若是判断条件改为了j<i,那么每一行就会少打印最后一个.例如,在第一行的时候,i=0;j也等于0;就无法进入判断条件.第一行只打印一个换行符.在第二行的时候,j=0可以打印一个五角星,但是j=1的时候,就没有办法打印了,也就只能打印1个.从而会打印出一个比之前每一行都少一个的三角形.

        for (var i = 0; i < 10; i++) {
for (var j = 0; j <= i; j++) {
document.write("☆");
}
document.write("<br />");
}

三.   三角形-左上

a)   i的取值只能是从10开始递减,因为我们想取到10个十字,若是判断条件为>0的话,那么0的值就没有办法取到,只能是10-1的一个范围.这样的话,依旧可以打印出10行.

b)   因为我们想要打印左上方的三角形,那么三角形的个数,就是从上到下,以此减少的.每一行打印的个数由j来控制.因为每一行 打印的个数呈现递减趋势, 刚刚好符合i的顺序.

c)   第一行打印10个,第二行打印9个.j是从0开始的,只要让其小于i的值,就可以形成这种顺序.例如当i=10时候,第一行,j从0开始,0-9 打印10个;当i=9的时候,第二个,j是0-8;打印9个.以此类推.

d)   一直到最后一行,i=1;那么只有j等于0可以打印一个.

e)   j<i与j<=i的区别,如果我们将j的判断条件改为了j<=i,表示的意思就是当j等于i的值的时候也会打印一个,第一行中i的取值为1-10;j的取值就会变成0-11,打印11个.以此类推每一行都会多打印一个.打印到最后一行,也就是i等于1的时候,j的取值为0,1,就会打印两个.但是i的取值已经到了最后,却打印了两个星星.此为错误.

f)   如是让j<=i,只能让j的取值从1开始,那么j的取值个数才能和i保持相等.

           for (var i = 10; i > 0 ; i--) {
for (var j = 0 ; j < i ; j++) {
document.write("☆");
}
document.write("<br />");
}

四.   .三角形-右上

a)   若是想打印右上方的三角形的话,我们就需要用空格挤开.因为,打印是从左到右逐渐进行的.我们可以先打印出来一个正方形,将这个然后判断打印的位置,决定是打印星星还是空格.

b)   所以i的取值依旧是从10-1;打印行;然后j的取值也是从10-1打印10个.其实吧,就是每一行都打印,只是在没有一行中打印的空格个星星的个数不一样.例如在第一行中我们打印10个星星不打印空格.在第二行中,我们先打印一个空格,再打印9个星星.

c)   第一行:i=10的时候,进入j.然后j也是10,就会进入判断j<=i.因为j是递减的,而j的最大值为10,此时i的值为10.故都会打印为星星.第一行也就会打印10个星星.

d)   第二行:i=9的时候,在第一个j=10的时候,会打印一个空格,然后j的取值就会是9-1,就会打印为星星.

e)   最后一行,i的取值为1;j在10-2的时候,会打印9个空格,最后j也等于1的时候,打印一个星星.

f)   若是将判断条件改为了j<i,那么每一行都会少打印一个星星.去掉了每一行的第一个星星.最后一行也就只打印空格.

         for (var i = 10; i > 0 ; i--) { //控制行数.
for ( var j = 10 ; j > 0; j--) {
//每行打印的个数,每行都要打印,先是打印全是星星.
//然后,逐渐在前面打印空格的个数,减少后面星星的个数.
if ( j <= i ) {
document.write("☆");
}else {
document.write("&nbsp;")
}
}
document.write("<br />")

五.   三角形-右下

a)   方法与右上类似.也是每一行都要打印,只不过打印的顺序不同,先是打印空格,再打印星星.

b)   同样,在第一行中,i=10;进入j循环,打印十个.进行判读,j<=i,j的取值是从1-10,逐渐增大.j取值1-9的时候,都是打印空格,只有当j取值为10的时候打印星星.

c)   在第二行中,i的取值为9,那么j的取值从1-8的时候打印空格,9,10的时候打印星星.

d)   在最后一行中,i的取值为1,j的取值是从1-10,都是>=i的,所以都会打印为星星.

               for (var i = 10; i > 0; i--) { //控制行数.
for (var j = 1; j <=10; j++) {
//每行打印的个数,每行都要打印,先是打印全是星星.
//然后,逐渐在前面打印空格的个数,减少后面星星的个数.
if (j >= i) {
document.write("☆")
} else {
document.write("&nbsp;");
}
}
document.write("<br />")
}

六.   菱形

a)   打印菱形的时候,分成上下两个部分.

b)   上面的部分为4行.下面的部分为三行,以此来组成一个菱形.

c)   上面的部分构成为:

第一行:三个空格,一个星星.

第二行:两个空格,三个星星.

第三行:一个空格,五个星星.

第三行;没有空格,七个星星.

d)   其实我们在打印两个for循环的时候,第二行打印的个数,就是j的那个判断条件,j小于几就打印几个.这样的话就可以看出.在第一行中空格为3,i为0 .空格为2,i为1.这样的话就能够看出空格和i的规律,就是3-i.那么判断条件就是3-i.

e)   同样的方法发现星星和i的关系.将其写为判断条件,就能知道在这一行中,需要打印多少个某种东西.

f)   下面部分的构成类似:

第一行:一个空格,五个星星.

第二行:两个空格,三个星星.

第三行:一个空格,五个星星.

               for (var i = 0 ; i < 4; i++) {
for (var j = 0 ; j < 3-i; j++) {
document.write("&nbsp;")
}
for (k = 0 ; k < 2*i+1 ; k++) {
document.write("☆")
}
document.write("<br />")
} for (var i = 0 ; i < 3 ; i++) {
//打印空格
for(var j = 0 ; j <= i ; j++){
document.write("&nbsp;")
}
//打印星星
for ( var k = 0; k < 5-i*2 ; k ++) {
document.write("☆")
}
document.write("<br />")
}

JavaScript-页面打印正方形,各种三角形与菱形的更多相关文章

  1. javascript页面打印

    打印本身比较简单,但要考虑到具体的需求.比如 1. 多浏览器: if (isIE()) { //打印预览 WebBrowser1.execWB(7, 1); } else { window.print ...

  2. 开源的javascript实现页面打印功能,兼容所有的浏览器(情况属实)

    这篇文章完全是属于技术文章,也是记录一下自己在项目当中遇到的坑爹问题啊,因为是B/S的程序,所以打印功能还是必须要有的,对于打印我选择了一个js插件,发现非常的简单和方便,所以这里拿出来和大家分享一下 ...

  3. Jqprint实现页面打印

    好些项目需要实现页面打印,特别是一些后台管理类系统,下面介绍一款轻量级的打印插件: 1.实现页面打印要引入jQuery和Jqprint.点击下载Jqprint插件 <script languag ...

  4. js调用页面打印

    ----------------------调用页面打印-------------------------------- <body> <div id="divPrint& ...

  5. JSP 页面打印

    <HTML><HEAD><TITLE>javascript打印-打印页面设置-打印预览代码</TITLE> <META http-equiv=Co ...

  6. asp.net调用Lodop实现页面打印或局部打印,可进行打印设置或预览

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebPrint.aspx.cs ...

  7. android网页打印,安卓网页打印,h5页面打印,浏览器打印,js打印工具

    Android设备打印比较麻烦,一般设备厂商都提供原生app开发的SDK,我们web开发者为难了,不会原生开发啊 给大家提供一个思路,实现web加壳,利用打印浏览器实现 简单来说就是把我们的web页面 ...

  8. Web系统页面打印技术实现与分析

    1 Web页面打印概述应用WEB化,不论对开发商,还是对用户来说,实在是一种很经济的选择,因为基于WEB的应用,客户端的规则很简单,容易学习,容易维护,容易发布.在WEB系统中,打印的确是个烦人的问题 ...

  9. 使用jqprint插件完成页面打印

    使用jqprint插件完成页面打印 jqprint是一个基于jQuery编写的页面打印的一个小插件,但是不得不承认这个插件确实很厉害,最近的项目中帮了我的大忙,在Web打印的方面,前端的打印基本是靠w ...

随机推荐

  1. Visual Studio自动生成文件版本信息

    一.     前言 通常,要控制输出文件的版本信息,只需要手动修改资源rc文件中的Version,即可在输出文件的文件属性里查看到对应的版本信息.如下图:    但是,版本号是会随时都更新的,每次bu ...

  2. mvn_action

    validate(验证): 验证项目正确,并且所有必要信息可用. compile(编译): 编译项目源码 test(测试): 使用合适的单元测试框架测试编译后的源码. package(打包): 源码编 ...

  3. TCP客户服务端

    创建TCP服务端1.创建一个ServerSocket对象.2.调用accept()方法接收客户端请求.3.从Socket中获取I/O流.4.对I/O流进行读写操作,完成与客户端的交互.5.关闭I/O流 ...

  4. p1697食物链

    动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A.现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到底是哪一种.有人用两种说法 ...

  5. 利用Python3的dpkt库进行ARP扫描

    背景 正在学习网络协议,用Python写起来方便点,可以快速熟悉协议本身,也给自己补充一些Python库. 偶然看到这篇文章,讲的是Python发ARP包,发现是Python2的,这里改了一下,用Py ...

  6. java多线程实现简单队列

    1.创建Queue.java public class Queue { private LinkedList<Object> list = new LinkedList<Object ...

  7. Oracle:ORA-01790: expression must have same datatype as corresponding expression

    今天有现场报sql错误,错误sql语句 类似  select * from  tableA  where (exists  条件A   or exists 条件B), 单独执行  select * f ...

  8. CodeForces-668D:Remainders Game (中国剩余定理||理解)

    Today Pari and Arya are playing a game called Remainders. Pari chooses two positive integer x and k, ...

  9. 如何生成Android的keystore文件

    步骤   1 找到本机电脑上jdk安装的目录,使用cmd命令打开命令窗口,输入cd  jdk目录(替换成你的jdk的bin目录),进入到jdk的bin目录,接下来你才可以使用jdk的命令进行操作 步骤 ...

  10. mongoDB的复制集5----复制集安全(认证,用户,权限)

    一.什么是认证  如何开启认证    1).auth=true(在配置文件里增加)    2).keyFile(建议添加到配置文件里) #如果设置了auth=true,但第一次没有创建用户就启动实例怎 ...