JavaScript實現倒直角三角形

倒直角三角形是一種經典的幾何圖形，使用JavaScript可以快速的繪制出來。我們在這里通過舉例的方式，來說明如何使用JavaScript畫出倒直角三角形。

首先，我們需要了解倒直角三角形的特點。倒直角三角形是一種三角形，三條邊的長度滿足以下條件：一條邊為直角邊，即與其他兩條邊垂直；另外兩條邊的長度可以不等，但至少有一條邊與直角邊垂直。

倒直角三角形的代碼實現如下：

function drawReverseTriangle(rows) {
for (let i = rows; i >= 1; i--) {
let star = '';
for (let j = i; j >= 1; j--) {
star += '* ';
}
console.log(star);
}
}
drawReverseTriangle(5);

以上代碼使用了for循環，從大到小遍歷每一行，同時內層循環也從大到小遍歷每一列，并將每一列的星號拼接成一個字符串。最后在控制臺輸出拼接好的字符串。

倒直角三角形的輸出結果如下：

* * * * *
* * * *
* * *
* *
*

以上結果滿足倒直角三角形的要求，即第一行為5個星號，最后一行為1個星號，并且每一行縮進一個星號。

使用Web頁面繪制倒直角三角形：

let rows = 5;
let triangleContainer = document.getElementById('triangle-container');
for (let i = rows; i >= 1; i--) {
let starContainer = document.createElement('div');
starContainer.classList.add('star-container');
for (let j = i; j >= 1; j--) {
let star = document.createElement('span');
star.classList.add('star');
starContainer.appendChild(star);
}
triangleContainer.appendChild(starContainer);
}

以上代碼使用了DOM操作，創建了一個名為"triangle-container"的DIV容器，用來存放倒直角三角形。然后使用for循環遍歷每一行，并在每一行中創建一個名為"star-container"的DIV容器，用來存放星號。在內層循環中，使用createElement方法創建一個名為"star"的SPAN標簽，代表一個星號，并將其添加到"star-container"容器中。最后將"star-container"容器添加到"triangle-container"容器中。CSS樣式可以使用以下代碼實現：

.triangle-container {
display: flex;
flex-direction: column;
align-items: center;
}
.star-container {
display: flex;
justify-content: center;
}
.star {
display: block;
width: 20px;
height: 20px;
background-color: #000;
margin: 5px;
}

以上CSS樣式使用了flex布局，在HTML中創建的容器都是使用了flex布局，使得倒直角三角形能夠在頁面上居中顯示。同時使用了塊級元素，將星號顯示在單獨的一行。具體樣式可以根據需求進行調整。

通過以上例子，我們可以看到，使用JavaScript可以快速的實現倒直角三角形，并且可以通過Web頁面的形式更加直觀的展示出來。對于實際需求中的使用，可以根據具體情況進行調整。