JavaScript学习笔记-循环输出菱形，并可菱形自定义大小

         var Cen = 6;//定义菱形中部为第几行（起始值为0）

         //for循环输出菱形
         document.write("<button onclick='xh()'>点我for循环</button>");//在HTML里输出一个按钮，点击后执行输出菱形的操作
         document.write("<p id='xunhuan'></p>");//在HTML里输出一个段落p来容纳菱形
         function xh() {
             var kong = "";
             var x = 0;//控制margin的数值增加减少的值
             for (i = 0 ; i <= Cen * 2 ; i++) {
                 if (i == 0 || i == Cen * 2) {
                     kong += "<p style='margin-left:" + (Cen * 20 + 5) + "px'>8</p>";
                 };
                 if (i != 0 && i <= Cen) {
                     x += 20
                     kong += "<p style='margin-left:" + (Cen * 20 - x) + "px'> <span style='margin-right:" + (2 * x) + "px'>8</span> <span>8</span> </p>";
                 };
                 console.log(x);
                 if (i != Cen * 2 && i > Cen) {
                     x -= 20
                     kong += "<p style='margin-left:" + (Cen * 20 - x) + "px'> <span style='margin-right:" + (2 * x) + "px'>8</span> <span>8</span> </p>";
                 };
             };
             document.getElementById("xunhuan").innerHTML = kong;

         };

         //while循环输出菱形
         document.write("<button onclick='xh2()'>点我while循环</button>");
         document.write("<p id='xunhuan2'></p>");
         function xh2() {
             var kong = "";
             var i = 0, x = 0;
             while (i <= Cen * 2) {
                 if (i == 0 || i == Cen * 2) {
                     kong += "<p style='margin-left:" +( Cen * 20 + 5) + "px'>8</p>";
                 };
                 if (i != 0 && i <= Cen) {
                     x += 20;
                     kong += "<p style='margin-left:" + (Cen * 20 - x) + "px'> <span style='margin-right:" + (2 * x) + "px'>8</span> <span>8</span> </p>";
                 };
                 if (i != Cen * 2 && i > Cen) {
                     x -= 20;
                     kong += "<p style='margin-left:" + (Cen * 20 - x) + "px'> <span style='margin-right:" + (2 * x) + "px'>8</span> <span>8</span> </p>";
                 };
                 i++
             };
             document.getElementById("xunhuan2").innerHTML = kong;

         };

逻辑分析：

1、我们用html建立一个中部处于第三行时的小的菱形，来分析它的构成和规律

2. （1）输出段落，菱形中部=3，段落p=5，因此我们首先用for||while循环输出5个段落；

（2）第一个p和最后一个p为菱形的顶点，仅需要在<p>里输入一个8即可，因此首先我们做一个判断，让其先输入两个顶点；

（3）中部为菱形的两条边，其中菱形为对称图图形，因此我们发现其和分为两个部分需递增和递减其margin-left和两条边相隔的margin-right就可以实现了，因此我们做了两个判断；

（4）最后我们来发现这个菱形的中部其实就是他对称分隔的两个判断的值，而最后一个顶点就是他输出的总的段落值，因此我们来根据这个中部值去定义每一个判断值

（5）最后我们来分析他的margin-left和两条边相隔的margin-right的规律，发现除了一头一尾一样，上面和下面出现规律递增递减，因此我们这里定义一个x=0
，通过其递增递减来实现菱形边距离的变化。

综上所述，步骤就几个：
html里输入一个菱形，分析他的结构，找出规律
判断两个顶点的位置和
判断中部和中部以上的边的位置
判断中部以上的边的位置
最后根据这个死的菱形去分析如何变成中部可以活动的菱形，分析其中不值与其的关联