0%

JS Dungeon for Rookies First Boss Multiplication Table

Posted on Edited on

新手 JavaScript 地下城第一關 - 9X9乘法表

新手 JS 地下城 是由六角學院 (我有註冊的線上程式教學課程) 提供給課程學員的一些挑戰關卡，希望藉由這些關卡讓學員可以累積經驗、熟練網頁前端技術。大致瀏覽之後，我發現每關各有其側重的領域，有些關卡比較強調 HTML 結構 + CSS 排版，而另外一些則比較要求 JS 要做出指定的功能 (撈資料、互動等)。

因為最近 Vue 學一學有點煩了，想轉換心情。 因為最近覺得自己在 Vue 的學習上，偶爾還是會卡個一下，腦子轉不太過來，需要重想幾次、查個資料才會通，所以就想撥出一些時間來寫這些關卡，看寫完之後自己會不會更快地吸收 Vue 的課程。結論就是： 參！ 戰！ 決！ 定！

  • 由老師提供的第一關設計稿
  • 直接講心得：就本關來說，我遇到的問題主要是在 CSS 排版上的問題，最後分別使用 flex, float 兩種排版方法來處理。

一些重要步驟 & 想法：

  • 先針對主區塊 <main></main> 和頁角區 <footer></footer> 定義背景色跟字體等設定，接著用 .container{...} 設定好整體的內容邊界。
  • 接著，因為大標和 2~9 的數字區塊，整體呈現並排，且為大小接近的區塊，因此馬上想到使用 flexbox 來做外層排版。
大標區塊的 CSS
  • 由中間區塊 (中英大標) 和兩個格線區塊形成，因此使用 flex-direction: column 加上 justify-content: space-between 來製作

[solution: flex]

數字區塊的 CSS
  • 此區比較難處理的是容納大數字跟各項小算式的元素要先想好要用 display: block 或是 display: inline-block 哪種結構。另外，因為左側是大數字加三排小算式的組合，右側則為六個算式的組合，要先設想怎麼處理兩邊的排列才能順利對齊。
  • 雖然用 flex 應該也可排好此處的區塊，但我又想跟 float 排列混熟一點，因此最後決定讓左邊區塊以 float: left ，右側區塊使用 float: right 的方式處理，使用完最後不要忘記加上 <div class="clearfix" style="clear: both;"></div> 的相關設定來清除元素浮動的特性喔。
  • 大數字的陰影效果使用的是 text-shadow: 4px 3px 0 #f0f0f0 設定。
  • 數字區塊的外框使用的是 border-radius: 100px 0 30px 0 和 box-shadow: 0 3px 10px #d8d8d8 來完成。
撰寫 JavaScript
  • 儘管粗略地學過，但卻沒有太多 jQuery 的實戰經驗，所以希望藉這個機會熟悉一下這個老牌的套件 (雖然最後用到的語法只有一個)。
  • ※ 這個挑戰有一個限制是各項算式要用 JS 寫入，不能直接一個一個刻到 html 上。
    • 解法：.innerHTML() 方法，或是 jQ 對應的 .html() 方法。
    • 因為上述兩種方法是對選擇器下的內容全部取代，所以依照前面的 flex 排版設計，要先把第一個大標區塊 (跟後面的 “9X9乘法算式” 沒有重複的內容) 先存成一個字串組，最後再跟兩個迴圈產生的算式內容一起塞入，組成網頁內容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const prefixStr = `
    <div class="titlebox d-flex direction-vertical space-between align-center"> // 預先定義的 css 樣式
        <div class="d-flex">
            <p>X&nbsp;&nbsp;</p> // 形成兩個空格
            <hr /> // 分割線
            <p>&nbsp;&nbsp;X</p>
        </div>
        <div class="main-title">
            <h3>九九乘法表</h3>
            <h4>MULTIPLICATION TABLE</h4>
        </div>
        <div class="d-flex">
            <p>X&nbsp;&nbsp;</p>
            <hr />
            <p>&nbsp;&nbsp;X</p>
        </div>
    </div>
`;
  • 接著，因為左側的算式只到乘數為 3，右側的乘數是 4 到 9，所以先定義一個臨界值，並在兩個迴圈中加入判斷式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const divisionNum = 4;

for (let i = 2; i < 10; i++) {
    var leftStr = ``;
    var rightStr = ``;
    for (let j = 1; j < 10; j++) {
      if (j < divisionNum) {
        leftStr += `<p>${i} x ${j} = ${i * j}</p>`;
      } else {
        rightStr += `<p>${i} x ${j} = ${i * j}</p>`;
      }
    }
    //...每做完一個乘數(j)後，要另外加上起始的大數字(新的被乘數)
}
  • 接著把上面迴圈形成的字串組，加到 html 結構中：
1
2
3
4
5
6
7
8
9
10
11
12
allBoxStr += `
<div class="numbox">
    <div class="left-sec">
        <h2>${i}</h2> // 起始的大數字
        ${leftStr} // 乘數小於 4 的區塊
    </div>
    <div class="right-sec">
        ${rightStr} // 乘數大於等於 4 ，小於 10 的區塊
    </div>
    <div class="clearfix"></div> // 清除浮動的設定
</div>
`;
  • 最後把大標區塊和 9X9 乘法表區塊合併塞入指定的 html 標籤下，完成！
1
$("#content").html(prefixStr + allBoxStr)