// 通过程序， 在页面中输出如下的图形：
// 第一个图形：
// *
// **
// ***
// ****
// *****
//
// 第二个图形：
// *****
// *****
// *****
// *****
// *****
/*
* 向body中输出一个内容,需要使用document.write("")
*
* 要实现第二个图形，其实也很简单，也是很笨拙的方法，
* 那就是复制五个document.write("")，或者在一个document.write("*****")
* 中复制五个‘*’，也能实现一行五个‘*’。五行‘*’上下排列的话，只需要在第五个
* document.write("")中加上‘<br>’换行标签，或者在document.write("*****")内加上
* ‘<br>’换行标签就行，如下列第一个写法、第二个写法：。但是，这样写有些弊端，那就是不够机动性，
* 复制粘贴也比较麻烦，代码更没有灵活性。为了解决这几个弊端，这里会使用嵌套for循环。
*/
//第一个写法，复制五个document.write("")，并在第五个document.write("")里面加上换行标签
// document.write("*");
// document.write("*");
// document.write("*");
// document.write("*");
// document.write("*<br />");
// document.write("*");
// document.write("*");
// document.write("*");
// document.write("*");
// document.write("*<br />");
// ...
//第二个写法，复制一个document.write("*****<br />")并在第五个*后面加上换行标签
// document.write("*****<br />");
// document.write("*****<br />");
// document.write("*****<br />");
/*
* 什么是嵌套for循环？
* 嵌套for循环是指一个for循环内再写一个for循环。
* 接下来就是第三个写法，开始写嵌套for循环
*
* 通过题看图形，来分析步骤
* 第一个图形有点难，所以先看第二个图形。
* 首先，第二个图形的排列是一行五个‘*’，一排也是五个‘*’组成的长方形图案。
* 要想输出这些 ‘*’ 就需要创建很多个document.write("*")
* 这样写太麻烦，所以在这里需要创建for循环，来帮助实现这个功能
* 一行五个‘*’，就需要创建五次，那么一排也是同样的意思
* 那么在实现的时候，我们需要再写一个for循环来创建一排
* 接下来就是实现一点一点实现嵌套for循环，
*/
//第一，先创建一个for循环体
for(var i = 0; i < 5; i++) {
/*
* 在循环的内部再创建一个for循环，用来控制图形的宽度
* 目前，外部的for循环执行1次，内部就会执行5次
* 内层循环可以来决定图形的宽度，执行几次图形的宽度是多少
*/
for(var j = 0; j < 5; j++) {
document.write("* ");
}
document.write("<br />");
}
//设置分割线
document.write("<br />");
document.write("===分割线===<br />");
document.write("<br />");
/*
* 第二个图形做好了，接下来就是第一个图形
* 先把上面两个for循环复制下来为了区分两个图形，上面会做一个分割线
*/
//外层是控制图形的高度
for(var i = 0; i < 5; i++) {
/*
* 在循环的内部再创建一个for循环，用来控制图形的宽度
* 目前，外部的for循环执行1次，内部就会执行5次
* 内层循环可以来决定图形的宽度，执行几次图形的宽度是多少
*
* 在上面矩形图形的写法里，内层控制的是宽度，也就是‘*’的个数。它的个数都是 5 个。
* 而这个图形要求的是第一行是一个‘*’，第二行是两个‘*’，以此类推直至第五行是五个‘*’，
* 这样就形成了一个直角三角形。
* 上面矩形图形内层for循环是 j<5,这样就形成了矩形图形
* 那这里是直角三角形的话，应该怎么写哪？
* 首先，来看第一行是一个‘*’，第二行是两个‘*’，以此类推直至第五行是五个‘*’，这是一个递增的，
* 那来看看谁是第一个循环的，外层for循环是第一个循环的，循环一次内层for循环也会循环，从这里就
* 可以看出这是我们需要的，当外层for循环一次，内层for循环就要循环一次，当外层for循环二次时，内层for循环二次，
* 也就是内层for循环的 j < i+1 ,这样就可以实现第一个图形
*/
for(var j = 0; j < i + 1; j++) {
document.write("* ");
}
document.write("<br />");
}
//设置分割线
document.write("<br />");
document.write("===分割线===<br />");
document.write("<br />");
//如果把三角形倒过来实现的话，那怎么实现哪？
//第三个图形
// *****
// ****
// ***
// **
// *
for(var i = 0; i < 5; i++) {
/*
* 在循环的内部再创建一个for循环，用来控制图形的宽度
* 目前，外部的for循环执行1次，内部就会执行5次
* 内层循环可以来决定图形的宽度，执行几次图形的宽度是多少
*
* 其实，很简单，那就是内层for循环 j < 5-i ，第一行是五个‘*’，第二行是四个‘*’，以此类推到第五行是一个‘*’
* 只需要在外层循环一次，内层for循环就从 五个‘*’开始减去，当外层for循环条件变量 i 的值是 4 时，内层for循环就需要j < 5-4
* 这个 4 也就是 i 的值
*/
for(var j = 0; j < 5-i; j++) {
document.write("* ");
}
document.write("<br />");
}