用 JS HTML 從右到左畫一個倒三角形

Question

我正在嘗試使用 HTML 中的 JS 在下圖中繪制第三和第四個三角形。 我為前兩個三角形制作了兩個函數，我想我只需要為第三個和第四個三角形稍微扭轉一下 for 循環，但我不知道該怎么做。 這是前兩個的代碼。

 function draw1() { let mytable = "<table>" for (let i = 1; i < 6; i++) { mytable += "<tr>"; mytable += "<td>" + "*".repeat(i) +"</td>"; } mytable += "</tr>" document.write(mytable) } draw1() function draw2() { let mytable = "<table>" for (let i = 5; i > 0; i--) { mytable += "<tr>"; mytable += "<td>" + "*".repeat(i) +"</td>"; } mytable += "</tr>" document.write(mytable); } draw2()

Answer 1

為了旋轉*箭頭，您不必重做 js。 您可以簡單地使用 css 方向：您的 js 創建的table的direction: rtl規則。 像這樣：

table {
  direction: rtl;
}

 function draw1() { let mytable = "<table>" for (let i = 1; i < 6; i++) { mytable += "<tr>"; mytable += "<td>" + "*".repeat(i) +"</td>"; } mytable += "</tr>" document.write(mytable); } draw1(); function draw2() { let mytable = "<table>" for (let i = 5; i > 0; i--) { mytable += "<tr>"; mytable += "<td>" + "*".repeat(i) +"</td>"; } mytable += "</tr>" document.write(mytable); } draw2();

 table { direction: rtl; }

Answer 2

使用下面的代碼來創建模式。 參考

 let n = 5; // you can take input from prompt or change the value let string = ""; for (let i = 1; i <= n; i++) { // printing spaces for (let j = 0; j < n - i; j++) { string += " "; } // printing star for (let k = 0; k < i; k++) { string += "*"; } string += "\n"; } console.log(string);

這是第二種模式的代碼。 參考

 let n = 5; // you can take input from prompt or change the value let string = ""; for (let i = 0; i < n; i++) { // printing star for (let k = 0; k < n - i; k++) { string += "*"; } string += "\n"; } console.log(string);

Answer 3

您需要在添加 * 之前添加空格。 由於您正在渲染 HTML 使用  為空格字符。 使用其中 2 個來適當地覆蓋循環區域。

 function draw1() { let mytable = "<table>"; for (let i = 1; i < 6; i++) { mytable += "<tr>"; mytable += "<td>" + "*".repeat(i) +"</td>"; } mytable += "</tr>"; document.write(mytable); } draw1() function draw2() { let mytable = "<table>"; for (let i = 5; i > 0; i--) { mytable += "<tr>"; mytable += "<td>" + "*".repeat(i) +"</td>"; } mytable += "</tr>"; document.write(mytable); } draw2(); function draw3() { let mytable = "<table>"; for (let i = 1; i < 6; i++) { mytable += "<tr>"; mytable += "<td>" + "&nbsp;&nbsp;".repeat(5-i) + "*".repeat(i) +"</td>"; } mytable += "</tr>"; document.write(mytable); } draw3(); function draw4() { let mytable = "<table>"; for (let i = 5; i > 0; i--) { mytable += "<tr>"; mytable += "<td>" + "&nbsp;&nbsp;".repeat(5-i) + "*".repeat(i) +"</td>"; } mytable += "</tr>"; document.write(mytable); } draw4();