用 JavaScript 切出九九乘法表 | JS 地下城 - 001

• BOSS 弱點

  • 【特定技術】需使用 JS for 迴圈技巧，裡頭數字不能直接寫在 HTML 上，需使用 JS 印出。需使用 HTML、CSS、JS 技術介面需與設計稿一致

• UI 設計稿

第一步 - HTML 架構

不囉嗦，先寫出一格的架構，順便補上左上角那格，後面幾格之後用 JS 產生就好，目前先著重在架構跟樣式。

<ul class="wrap" id="mainList">
    <li class="l-card-title">
        <h1>九九乘法表</h1>
        <h2>MULTIPLICATION CHART</h2>
    </li>
    <li class="l-card">
        <ul class="l-card__wrap">
            <li class="l-card__wrap__title">2</li>
            <li>2x1=2</li>
            <li>2x2=4</li>
            <li>2x3=6</li>
            <li>2x4=8</li>
            <li>2x5=10</li>
            <li>2x6=12</li>
            <li>2x7=14</li>
            <li>2x8=16</li>
            <li>2x9=18</li>
        </ul>
    </li>
</ul>

第二步 - 主要架構 CSS 切法

主要的版面用 float, flexbox, grid 都能切出來，以要忠實呈現 UI 設計稿的方便性來排序是 grid > flex > float ，不過切這個之前剛好正學了格線系統，所以最後我還是用了格線系統。

不過我還是雞婆地列出三種方式的作法，哈哈。

• float - 最古老最繁瑣的東西 float 需要特別注意的地方，因為需要左右對齊，所以結構上中間需要再加上一層來設定左右的 margin。

這邊參考了鐵人賽文章 float 參考資料

.wrap {
    max-width: 1140px;
    width: 100%;
    margin: 32px auto;
    overflow: hidden;
}
.wrap > li {
    width: 350px;
    height: 366px;
    float: left;
    margin: 0 15px 40px 15px;
}
.row {
    width: 100%;
    height: 100%;
}

• grid - 格線系統做 RWD 比較多要設定 橫排的寬直接設定好寬度，讓每一格都不會超出畫面就可以。

* {
    box-sizing: border-box;
}
@mixin medium {
    @media (max-width: 1110px) {
        @content;
    }
}
@mixin sm {
    @media (max-width: 730px) {
        @content;
    }
}
body {
    background-color: #f0f0f0;
}
.wrap {
    max-width: 1110px;
    width: 100%;
    margin: 32px auto;
    display: grid;
    grid-template-columns: repeat(3, 350px);
    grid-template-rows: repeat(3, 366px);
    gap: 40px 30px;
    @include medium {
        max-width: 730px;
        grid-template-columns: repeat(2, 350px);
    }
    @include sm {
        max-width: 350px;
        grid-template-columns: repeat(1, 350px);
    }
}

• flex - 最方便的那種~

* {
    box-sizing: border-box;
}
.wrap {
    max-width: 1140px;
    width: 100%;
    margin: 32px auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.wrap > li {
    width: 350px;
    height: 366px;
    margin-bottom: 30px;
}

第三步 - 補上各種 CSS 細節

這邊就沒啥特別的，所以可以直接跳過 XD。 提一下內層的排版是用 flex 排，應該是比較方便的。

第四步 - 進入 JS 的世界囉 !

首先，我卡住了，哈哈哈。所以分個步驟來寫吧。

P.S. 以下為思考流程，實際寫的時候我是邊寫邊調整的。

1. 觀察畫面，把他切成多個部分來分別做，才不會把自己搞亂。

• 第一部分。觀察每一個區塊都有一個巨大的數字 2~9，為乘數。 這邊可想而知，可以用 for 迴圈來跑。

• 第二部分。每一個區塊裡面的小數字們，都是乘數乘上 1 - 9。 是不是就可以用每個區塊所取到的乘數跑 for 迴圈乘上 1 - 9。

• 區分好兩個部分之後，就依序來寫吧。

2. 建立第一區塊的迴圈

let mainList = document.getElementById('mainList');
function updateList() {
    //標題區塊先存進 strOut
    let strOut = `<li class="l-card-title">
    	<h1>九九乘法表</h1>
    	<h2>MULTIPLICATION CHART</h2>
  	</li>`;
    //跑for迴圈
    for (let i = 0; i < 8; i++) {
        strOut += `<li class="l-card">
     				<ul class="l-card__wrap">
        				<li class="l-card__title">${i + 2}</li>
      				</ul>
    			</li>`;
    }
    //最後再用innerHTML來插入HTML標籤
    mainList.innerHTML = strOut;
}

• 結果 ->

3. 建立內部數字迴圈

這邊建立數字迴圈需要注意的是，因為最後要帶入上面的函式裡面，所以需要在這個函式裡面放參數帶入該欄位的乘數。

let strInner = '';
function innerList(num) {
    for (let i = 0; i < 9; i++) {
        strInner += `<li> ${num} x ${i + 1} = ${num * (i + 1)} </li>`;
    }
}

跑跑看結果，看起來無誤

4. 最終的組合

這邊需要注意第 20 行的strInner ='';，如果沒有加上的話，每一欄都會加上上一欄的式子，所以需要清除。

let mainList = document.getElementById('mainList');
let chartNum = 8;
let strInner = '';
updateList();

function updateList() {
    //title
    let strOut = `<li class="l-card-title">
    	<h1>九九乘法表</h1>
    	<h2>MULTIPLICATION CHART</h2>
  	</li>`;
    for (let i = 0; i < chartNum; i++) {
        innerList(i + 2);
        strOut += `<li class="l-card">
     				<ul class="l-card__wrap">
        				<li class="l-card__title">${i + 2}</li>
        				${strInner}
      				</ul>
    			</li>`;
        strInner = '';
    }
    mainList.innerHTML = strOut;
}
function innerList(num) {
    for (let i = 0; i < 9; i++) {
        strInner += `<li>${num}x${i + 1}=${num * (i + 1)}</li>`;
    }
}

完成 !

Github-page 連結