用 JavaScript 切出九九乘法表 | JS地下城 — 001
Feb 22, 2020
第一篇技術筆記文章就交給 JS 地下城了，六角學院出的 JS 地下城真讚。
根據現成的設計稿與指定的技術來練習 JS ，之後就先以地下城作為主軸來寫文章吧。
BOSS 弱點
— 【特定技術】
需使用 JS for 迴圈技巧，裡頭數字不能直接寫在 HTML 上，需使用 JS 印出。— 需使用 HTML、CSS、JS 技術
— 介面需與設計稿一致
第一步 — HTML架構
不囉嗦，先寫出一格的架構，順便補上左上角那格，後面幾格之後用 JS 產生就好，目前先著重在架構跟樣式。
第二步 — 主要架構 CSS切法
主要的版面用 float, flexbox, grid 都能切出來，以要忠實呈現 UI 設計稿的方便性來排序是 grid > flex > float 。
不過切這個之前剛好正學了格線系統，所以最後我還是用了格線系統。
不過我還是雞婆地列出三種方式的作法，哈哈。
- float — 最古老最繁瑣的東西
float 需要特別注意的地方，因為需要左右對齊，所以結構上中間需要再加上一層來設定左右的 margin。
這邊參考了鐵人賽文章 float參考資料
- grid — 格線系統做RWD比較多要設定
橫排的寬直接設定好寬度，讓每一格都不會超出畫面就可以。
- flex — 最方便的那種~
第三步 — 補上各種 CSS 細節
這邊就沒啥特別的，所以可以直接跳過XD。
提一下內層的排版是用flex排，應該是比較方便的。
第四步 — 進入 JS 的世界囉 !
首先，我卡住了，哈哈哈。所以分個步驟來寫吧。
P.S. 以下為思考流程，實際寫的時候是邊寫邊調整的。
1. 觀察畫面，把他切成多個部分來分別做，才不會把自己搞亂。
- 第一部分。觀察每一個區塊都有一個巨大的數字 2~9，為乘數。
這邊可想而知，可以用 for 迴圈來跑。 - 第二部分。每一個區塊裡面的小數字們，都是乘數乘上 1–9，
是不是就可以用每個區塊所取到的乘數跑 for 迴圈乘上 1–9。 - 區分好兩個部分之後，就依序來寫吧。
2. 建立第一區塊的迴圈
結果 ->
3. 建立內部數字迴圈
這邊建立數字迴圈需要注意的是，因為最後要帶入上面的函式裡面，所以需要在這個函式裡面放參數帶入該欄位的乘數。
跑跑看結果，看起來無誤
4. 最終的組合
這邊需要注意第20行的 strInner ='';，如果沒有加上的話，每一欄都會加上上一欄的式子，所以需要清除。
本篇文章也有發布在我的個人部落格，歡迎來交流。
