js输出图形 - 倪建成的初级学习记录博客

js 输出图形：

通过 for 循环输出空格或白色点以及星号或黑色点完成

三角形：

for (var i = 0; i < height; i++) {
  for (var k = height; k > i; k--) {
    print += '<span style="background-color:#fff"></span>';
  }
  for (var j = 0; j < 2 * i + 1; j++) {
    print += '<span style="background-color:#000;"></span>';
  }
  print += "<br>";
}

正方形：

for (var i = 0; i < height; i++) {
  for (var j = 0; j < height; j++) {
    print += '<span style="background-color:#000;"></span>';
  }
  print += "<br>";
}

菱形：

  for (var i = 0; i < (Number(height)+1)/2; i++) {
                for (var k = (Number(height)+1)/2; k > i ; k--) {
                  print += '<span style="background-color:#fff"></span>';
                }
                for (var j = 0; j < 2*i+1 ; j++) {
                    print += '<span style="background-color:#000;"></span>';
                }
                print += "<br>";
            }
            for (var i = (Number(height)-1)/2; i > 0; i--) {

                for (var k = (Number(height)+1)/2; k >= i ; k--) {
                  print += '<span style="background-color:#fff"></span>';
                }
                for (var j = 0; j < 2*i-1 ; j++) {
                  // console.log(Number(height));
                    print += '<span style="background-color:#000;"></span>';
                }

梯形：

for (var i = 0; i < Number(height); i++) {
  for (var k = Number(height); k > i; k--) {
    print += '<span style="background-color:#fff"></span>';
  }
  for (var j = 0; j < 2 * i + Number(top); j++) {
    print += '<span style="background-color:#000;"></span>';
  }
  print += "<br>";
}

回形：

for (var i = 0; i < Number(height); i++) {
  for (var j = 0; j < Number(height); j++) {
    if (
      i == 0 ||
      i == Number(height) - 1 ||
      j == 0 ||
      j == Number(height) - 1
    ) {
      print += '<span style="background-color:#000;"></span>';
    } else if (Number(height) % 3 == 1) {
      if (
        (i == Math.floor(height / 3) || i == Math.floor(height / 3) * 2) &&
        j >= Math.floor(height / 3) &&
        j <= Math.floor(height / 3) * 2
      ) {
        print += '<span style="background-color:#000;"></span>';
      } else if (
        (j == Math.floor(height / 3) || j == Math.floor(height / 3) * 2) &&
        i >= Math.floor(height / 3) &&
        i <= Math.floor(height / 3) * 2
      ) {
        print += '<span style="background-color:#000;"></span>';
      } else {
        print += '<span style="background-color:#fff;"></span>';
      }
    } else if (Number(height) % 3 == 2) {
      if (
        (i == Math.floor(height / 3) || i == Math.floor(height / 3) * 2 + 1) &&
        j >= Math.floor(height / 3) &&
        j <= Math.floor(height / 3) * 2 + 1
      ) {
        print += '<span style="background-color:#000;"></span>';
      } else if (
        (j == Math.floor(height / 3) || j == Math.floor(height / 3) * 2 + 1) &&
        i >= Math.floor(height / 3) &&
        i <= Math.floor(height / 3) * 2 + 1
      ) {
        print += '<span style="background-color:#000;"></span>';
      } else {
        print += '<span style="background-color:#fff;"></span>';
      }
    } else {
      if (
        (i == Math.floor(height / 3) || i == Math.floor(height / 3) * 2 - 1) &&
        j >= Math.floor(height / 3) &&
        j <= Math.floor(height / 3) * 2 - 1
      ) {
        print += '<span style="background-color:#000;"></span>';
      } else if (
        (j == Math.floor(height / 3) || j == Math.floor(height / 3) * 2 - 1) &&
        i >= Math.floor(height / 3) &&
        i <= Math.floor(height / 3) * 2 - 1
      ) {
        print += '<span style="background-color:#000;"></span>';
      } else {
        print += '<span style="background-color:#fff;"></span>';
      }
    }
  }
  print += "<br>";
}

本文由倪建成学习时编辑，只是普通笔记。若是对你有用，可以自行转载

最后编辑时间为:2019-07-28 00:00:00