使用javascript制作完整的菱形

Question

jsbin

嗨，我正在尝试使用Javascript创建一个菱形，虽然由于某种原因我只有一个方面。我的程序基本上开始写出*符号，使菱形正好在页面开头的位置。它形成一种垂直的三角形。我已经尝试过加倍*的数量，我也尝试添加另一个if语句应该这样做＆＃34;你必须有一个空格一定数量的空格取决于行号＆＃34;但那没有用。

＆＃13;

＆＃13;

function drawMyLine(lengthLine, color1, color2) {
  var endLine = "<p>";
  for (var i = 0; i <= lengthLine; i++) {
    if (i % 2 === 0) {
      endLine += "<span style='color:" + color1 + "';>*</span>";

    } else {
      endLine += "<span style='color:" + color2 + "';>*</span>";

    }
  }
  endLine += "</p>";
  console.log(endLine);
  return endLine;
}


document.getElementById('line1').innerHTML = drawMyLine(0, 'red', 'blue');
document.getElementById('line2').innerHTML = drawMyLine(1, 'red', 'blue');
document.getElementById('line3').innerHTML = drawMyLine(2, 'red', 'blue');
document.getElementById('line4').innerHTML = drawMyLine(3, 'red', 'blue');
document.getElementById('line5').innerHTML = drawMyLine(4, 'red', 'blue');
document.getElementById('line6').innerHTML = drawMyLine(5, 'red', 'blue');
document.getElementById('line7').innerHTML = drawMyLine(6, 'red', 'blue');
document.getElementById('line8').innerHTML = drawMyLine(7, 'red', 'blue');


document.getElementById('line9').innerHTML = drawMyLine(7, 'red', 'blue');
document.getElementById('line10').innerHTML = drawMyLine(6, 'red', 'blue');
document.getElementById('line11').innerHTML = drawMyLine(5, 'red', 'blue');
document.getElementById('line12').innerHTML = drawMyLine(4, 'red', 'blue');
document.getElementById('line13').innerHTML = drawMyLine(3, 'red', 'blue');
document.getElementById('line14').innerHTML = drawMyLine(2, 'red', 'blue');
document.getElementById('line15').innerHTML = drawMyLine(1, 'red', 'blue');
document.getElementById('line16').innerHTML = drawMyLine(0, 'red', 'blue');

＆＃13;

<div id="line1">
</div>

<div id="line2">
</div>

<div id="line3">
</div>

<div id="line4">
</div>

<div id="line5">
</div>

<div id="line6">
</div>

<div id="line7">
</div>

<div id="line8">
</div>

<div id="line9">
</div>

<div id="line10">
</div>

<div id="line11">
</div>

<div id="line12">
</div>

<div id="line13">
</div>

<div id="line14">
</div>

<div id="line15">
</div>

<div id="line16">
</div>

＆＃13;

＆＃13;

＆＃13;