DOM练习及总结（菱形）

Posted 2020-10-20 diverman

类型1

利用DOM操作在标签中输入指定的内容

例制作菱形“*”

    //找元素
    var dd=document.getElementById("dd");
    //定义元素
    var kg="";
    var xing="";
    var str="";
    var kg1="";
    var xing1="";
    var str1="";
    //循环上半部分
    for(var i=0;i<4;i++){
        xing="";//定义空值，清空循环赋的值

//循环输出*
        for(var j=0;j<2*i+1;j++){
            xing=xing+"*";
        }
        kg="";

//循环输出空格个数
        for(var k=0;k<3-i;k++){
            kg=kg+"&nbsp;"
        }

//循环结果输出
        str=str+kg+xing+"<br>";
    }

//循环下半部分
    for(var l=1;l<4;l++){
        xing1="";//定义空值 清空循环赋的值

//循环输出*
        for(var a=0;a<2*(3-l)+1;a++){
            xing1=xing1+"*";
        }
        kg1="";

//循环输出空格
        for(var b=0;b<l;b++){
            kg1=kg1+"&nbsp;"
        }

//输出下半部分结果
        str1=str1+kg1+xing1+"<br>";
    }

//输出菱形
    dd.innerhtml=str+str1;

思路总结：

1.画出想要呈现的形状

2.根据画的形状找到规律

3.根据规律和所学知识，联想到用到的语法和代码

4.整理思路，写好大体注释，根据注释来写代码

　　4.1代码思路 先定义变量，需要输出的元素（空格  *  <br>标签）

　　4.2将菱形拆解成简单的三角形，利用for循环来写三角形

　　4.3分析出 i  j  k  三个变量的关系

易出错点：

1.注意定义空值，不然会把每次循环的赋值累积起来

2.注意寻找关系时将各个数字尽量拆解开，方便找关系