如何使用嵌套循环在 javascript 中制作钻石？

Question

我制作了这个代码，但只适用于钻石的右半部分，我该如何制作完整的钻石？我需要使用嵌套循环

function myDiamond(){
  let row, star;
  let toPrint = "";
  let rowCount = +prompt("Enter a number to make a diamond");
  
for (row = 1; row <= rowCount; row++){
  for (star = 1; star <= row; star++){
    if (star == 1 || star == row){
    toPrint +="*";
    } else {
      toPrint += " ";
    }
  }
  toPrint += "<br>";
} 
  document.getElementById("figure").innerHTML = toPrint;

  for (row = rowCount; row >= 1; row--){
    for (star = 1; star <= row; star++){
    if (star == 1 || star == row){
    toPrint +="*";
    } else {
      toPrint += " ";
    }
  toPrint += "<br>";
} 

  document.getElementById("figure").innerHTML = toPrint;
}
}

Answer 1

这是你想要做的吗：

function createDimondShape(size) {
  var stuff = "";
  for (var i = 1; i <= size; i++) {
    for (var s = size - 1; s >= i; s--) {
      stuff += (" ");
    }
    for (var j = 1; j <= i; j++) {
      stuff += ("* ")
    }
    stuff += "\n";
  }
  if (i == size + 1) {
    for (var i = 1; i <= size - 1; i++) {
      for (var s = 1; s <= i; s++) {
        stuff += (" ");
      }
      for (j = i; j <= size - 1; j++) {
        stuff += ("* ");
      }
      stuff += "\n";
    }
  }
  document.getElementById("figure").innerHTML = stuff;
}
createDimondShape(5);

<pre id="figure"></pre>

这里有几个试验：

function createDimondShape(a, size) {
  var stuff = "";
  for (var i = 1; i <= size; i++) {
    for (var s = size - 1; s >= i; s--) {
      stuff += (" ");
    }
    for (var j = 1; j <= i; j++) {
      stuff += ("* ")
    }
    stuff += "\n";
  }
  if (i == size + 1) {
    for (var i = 1; i <= size - 1; i++) {
      for (var s = 1; s <= i; s++) {
        stuff += (" ");
      }
      for (j = i; j <= size - 1; j++) {
        stuff += ("* ");
      }
      stuff += "\n";
    }
  }
  document.getElementById("figure" + a).innerHTML += stuff;
}
createDimondShape(1, 3);
createDimondShape(2, 7);

.f {
  display: flex;
  flex-direction: row;
}
.f pre {
  width: 45%;
}

<div class="f">
  <pre id="figure1"></pre>
  <pre id="figure2"></pre>
</div>

预览

有提示，如评论中所问：

function createDimondShape(size) {
  var stuff = "";
  for (var i = 1; i <= size; i++) {
    for (var s = size - 1; s >= i; s--) {
      stuff += (" ");
    }
    for (var j = 1; j <= i; j++) {
      stuff += ("* ")
    }
    stuff += "\n";
  }
  if (i == size + 1) {
    for (var i = 1; i <= size - 1; i++) {
      for (var s = 1; s <= i; s++) {
        stuff += (" ");
      }
      for (j = i; j <= size - 1; j++) {
        stuff += ("* ");
      }
      stuff += "\n";
    }
  }
  document.getElementById("figure").innerHTML = stuff;
}
createDimondShape(+prompt("Enter a number..."));

<pre id="figure"></pre>

Answer 2

你可以做到

document.querySelectorAll('input[type=range]').forEach(r=>r.oninput=_=>r.closest('label').dataset.val=r.value)

btDiamond.onclick=_=>
  {
  const szD = szDiam.valueAsNumber
  oneDiamond.textContent = ''

  for(let sp=szD;sp--;) 
    oneDiamond.textContent += ' '.repeat(sp) + '/'.repeat(szD-sp) + '\'.repeat(szD-sp) + '\n'
  for(let sp=0;sp<szD;sp++) 
    oneDiamond.textContent += ' '.repeat(sp) + '\'.repeat(szD-sp) + '/'.repeat(szD-sp) + '\n'
  }

label, pre {
  margin : 0.5em 1.2em;
  }
label input {
  vertical-align : middle;
  width          : 300px;
  }
label::after {
  display: inline-block;
  content : attr(data-val);
  width   : 2em;
  }

<h4>shine bright like a diamond</h4>
<label data-val="6">
  size :
  <input type="range" id="szDiam" min="1" max="20" value="6">
</label>  
<button id="btDiamond"> draw !</button>
<hr>

<pre id="oneDiamond"> your diamond will go here </pre>

如何使用嵌套循环在 javascript 中制作钻石？

How to make a diamond in javascript with nested loops?

javascript

loops

nested-loops