for循环写九九乘法表、菱形

一、九九乘法表
1.使用span

 <div id="wrap"></div>
  <script>
    let oWrap = document.getElementById("wrap");
    let text = "";//赋予空字符串，拼接时才不会出现其他的数据类型
    for (let i=1;i<=9;i++){
      text += "<p>"//开始标签
      //写循环拼接多个span元素
      //i 行号； j 列号；
      for (let j=1;j<=i;j++){
        text += "<span>" + j + "×" + i + "=" + j*i + "</span>";
        // 每一行需要多少个span标签
      }
      text += "</p>"//结束标签
    }
    oWrap.innerHTML = text;
  </script>

效果图
2.使用table标签

  <table id="wrap"></table>
  <script>
    let oWrap = document.getElementById("wrap");
    let text = "";
    for (let i=1;i<=9;i++){
      text += "<tr>";
      //写循环拼接多个span元素
      //i 行号； j 列号；
      for (let j=1;j<=i;j++){
        text += "<td>" + j + "×" + i + "=" + j*i + "</td>";
      }
      text += "</tr>";
    }
    oWrap.innerHTML = text;
</script>

效果图

3.使用br换行

 <div id="wrap"></div>
  <script>
    let oWrap = document.getElementById("wrap");
    let text = "";
    for (let i=1;i<=9;i++){
      //写循环拼接多个span元素
      //i 行号； j 列号；
      for (let j=1;j<=i;j++){
        text += "<span>" + j + "×" + i + "=" + j*i + "</span>";
      }
      text += "<br>";
    }
    oWrap.innerHTML = text;
    </script>

效果图

4.排列方式不一致

<div id="wrap"></div>
  <script>
    let oWrap = document.getElementById("wrap");
    let text = "";
    for (let i=9;i>=1;i--){
      text += "<p>"
      //写循环拼接多个span元素
      //i 行号； j 列号；
      for (let j=1;j<=i;j++){
        text += "<span>" + j + "×" + i + "=" + j*i + "</span>";
      }
      text += "</p>"
    }
    oWrap.innerHTML = text;
  </script>

效果图

二、菱形
1.偶数菱形

 <div id="wrap"></div>
  <script>
    let oWrap = document.getElementById("wrap");
    let h = "";
    //最长行数是多少
    let n = 7;
    for (let i=1;i<=2*n-1;i++){
      h += "<p>";
      let k = i<=n?i:n-(i-n);
      for (let j=1;j<=k;j++){
        h += "*";
      }
        h += "</p>";
    }
    oWrap.innerHTML = h;
   <script>

2. 偶数菱形

<div id="wrap"></div>
  <script>
    let oWrap = document.getElementById("wrap");
    let h = "";
    //最长行数是多少
    let n = 7;
    for (let i=1;i<=2*n-1;i++){
      h += "<p>";
      if (i<=n){
        for (let j=1;j<=i;j++){
          h += "*";
        }
      }else{
        for (let j=1;j<=n-(i-n);j++){
          h += "*";
        }
      }
      h += "</p>";
    }
    oWrap.innerHTML = h;
  </script>

效果图

3.奇数菱形

 <div id="wrap"></div>
  <script>
    let oWrap = document.getElementById("wrap");
    let h = "";
    //定义到最大的行数
    let n = 5;
    for (let i=1;i<=2*n-1;i++){
      h += "<p>";
      let k = i<=n?i:n-(i-n);
      for (let j=1;j<=2*k-1;j++){
        h += "*";
      }
      h += "</p>";
    }
    oWrap.innerHTML = h;
  </script>

效果图