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里輸入一個菱形，分析他的結構，找出規律
判斷兩個頂點的位置和
判斷中部和中部以上的邊的位置
判斷中部以上的邊的位置
最后根據這個死的菱形去分析如何變成中部可以活動的菱形，分析其中不值與其的關聯