用 JS HTML 从右到左画一个倒三角形

Question

I am trying to draw the 3rd and 4th triangle in the following picture with JS in HTML. I made two functions for the first two triangles, and I think I just need to twist the for loops a little bit for the 3rd and 4th ones but I don't know how to do it. Here are the codes for the first two ones.

 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

In order to rotate your * arrows, you don't have to redo the js. You can simply use the css direction: rtl rule for the table that your js creates. Like this:

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

Use the code below to create the pattern. reference

 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);

Here is code for the second pattern. reference

 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

You need add spaces before you add *. Since you are rendering HTML use   for space character. Use 2 of them to appropriately cover area in loop.

 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();