如何在JavaScript中使用兩個對稱的矩形三角形

Question

我想用JavaScript做類似this的事情。這是我創建上半部分的代碼：

<script> 
    var numberOfLines = 10; 
    var str = '*'; 
    var space = '&nbsp'; 
    for (var i = 0; i < numberOfLines; i++){ 
     document.write(str + '<br>'); 
     str = str + "*"; 
    } 
</script> 

我該如何完成它？

Answer 1

這並不完美，但很接近：

var numberOfLines = 10; 
 
var str = '*'; 
 
var arr = ["  ","  ","  ","  ","  ","  ","  ","  ","  ","  ","  ","  ","  ","  ","  ","  ","  ","  "]; 
 
var spaces = arr.join(""); 
 
for (var i = 0; i < numberOfLines; i++) { 
 
document.write(str + spaces + str + '<br>'); 
 
str = str + "*"; 
 
arr.splice(-1,1); 
 
arr.splice(-1,1); 
 
spaces = arr.join(""); 
 
}

Answer 2

您可以使用Array.join創建您的重複字符。使用等寬字體來保留空間寬度。

document.addEventListener("DOMContentLoaded", function(event) { 
 

 
    var output = ""; 
 
    var numberOfLines = 10; 
 

 
    for (lineNum = 0; lineNum < numberOfLines; lineNum++) { 
 
    output += Array(lineNum + 2).join("*") + Array(((numberOfLines * 2) - (2 * (lineNum))) -1).join("&nbsp;") + Array(lineNum + 2).join("*") + "<br>"; 
 
    } 
 

 
    document.getElementById("result").innerHTML = output; 
 

 
});

#result {font-family: monospace;}

<div id="result"></div>

Answer 3

雖然概念簡單，實際上是很多做這個時要考慮的，所以讓我們分析你的代碼，並建立從那裏。

for (var i = 0; i < numberOfLines; i++) { 
    document.write(str + '<br'); 
    str = str + "*"; 
} 

這將循環遍歷numberOfLines次。它也將輸出strnumberOfLines次。每個循環，您正在打印到文檔;但是，您希望在打印之前爲str添加大量空格以及動態數字*個字符，並且每次都會有不同數量的空格。因此，您可能需要在每次循環使用document.write()

有許多不同的方法可以做到這一點，我會去通過兩個str在重新建立str，或建立整個字符串：

使用函數

您可以創建一個函數來構建每一行。要做到這一點，你的功能需要知道幾件事：

• 會有多少行？
• 我們目前正在使用哪條線？
• 你應該在三角形的可見部分使用什麼字符？
• 你應該爲三角形的不可見部分使用什麼字符？

所以我們可以從創建一個函數開始，我們將其稱爲generateTriangleLine。 要生成一條線，我們需要看看我們要顯示多少個可見字符，以及多少個不可見字符。因爲有兩個方面，我們將要輸出的兩倍多字符作爲當前行號：

function generateTriangleLine(visible, invisible, numberOfLines, currentLine) { 
// Let's initialize the line so that it has no characters: 
var line = ''; 
// We want to output twice as many characters as there are lines 
// So we will loop from 0 to (but not including) numberOfLines * 2 
for (var i=0; i<numberOfLines*2; i++) { 
    if (i<=currentLine || i>=(2*numberOfLines - currentLine - 1)) { 
     // If we are at the beginning, or the end of the line, we want to output characters. 
     // We want to add as many visible characters as the line number we are on! 
     // At the end of the line, 2*numberOfLines = 20. If currentLine starts at 0, 
     // we will want to draw one visible character, so we need to subtract one from this. 
     line += visible; 
    } else { 
     // If we aren't at the beginning or end, just add the invisible character. 
     line += invisible; 
    } 
} 
// And we want to return the line: 
return line; 
} 

在我們的代碼，我們就可以通過numberOfLines次循環，用我們的函數生成的每一行：

for (var i=0; i<numberOfLines; i++) { 
    // We'll add a <br> to each line, so that it is drawn appropriately. 
    document.write(generateTriangleLine('*', '&nbsp', numberOfLines, i) + '<br>'); 
} 

如果我們運行這個，我們會得到相應的輸出，但它不一定會被正確格式化。這是因爲您每天閱讀的大多數字體對於每個字符都有不同的寬度。我們可以解決這個問題的最簡單的方法是通過包裝我們的產量在<pre>標籤：

document.write('<pre>'); 
for (var i=0; i<numberOfLines; i++) { 
    // We'll add a <br> to each line, so that it is drawn appropriately. 
    document.write(generateTriangleLine('*', '&nbsp', numberOfLines, i) + '<br>'); 
} 
document.write('</pre>'); 

使用嵌套的循環來生成整個輸出

我們可以採取另一種方法是完全一樣的與上面的函數，但是，而不是調用一個函數生成的每一行，我們在產生最終共中對循環每一行，然後輸出的一切：

// The first loop will be for each line. 
for (var i = 0; i < numberOfLines; i++) { 
    // The nested for loop will be for each character on each line 
    // Remember, we have twice as many characters as we do lines 
    for (var x = 0; x < numberOfLines * 2; x++) { 
     // Just like we did in the function, we want to check 
     // if we're at the beginning or the end of the line 
     // Again, we subtract one from the end so that we still output at least one * on 
     // the first line. 
     if (x <= i || x >= (numberOfLines*2) - i - 1) { 
      // If we are at the beginning or end, output the * 
      str += "*"; 
     } else { 
      // Otherwise, output the space 
      str += space; 
     } 
    } 
    str += '<br>'; 
} 

再次，W e會得到正確的輸出;不過，我們需要調整字母寬度，以便我們可以將文字包裝在<pre>標籤中。

請記住，有很多方法可以解決編程問題。我只提供了幾個例子。我會極力鼓勵你通過自己的方式來練習，使用你從各種反應中學到的技能！