JS 新手地下城試煉攻略:B1-九九乘法表

為了記錄挑戰 Udemy 課程「JavaScript 題目篇-新手 JS 地下城」的過程,有了接下來一系列的 JS 新手地下城攻略文章。希望可以破台…

第一關要挑戰的是「九九乘法表」,如下圖。

九九乘法表


九九乘法表

未來這一系列的文章,會先簡單整理開發的步驟和邏輯,再分別以技術或概念來討論。

以第一關的「九九乘法表」來說,步驟為:

  1. 撰寫 HTML 的網頁結構,包括「九九乘法表」標題和內容樣板。
  2. 利用 CSS 美化「九九乘法表」標題和內容樣板。
  3. 透過 JavaScript 載入頁面時自動生成「九九乘法表」內容。

HTML

網頁結構分為外層與內層,外層是包住整個九九乘法表的容器,內層則是九九乘法表的內容,也就是九個區塊, 如下方程式碼:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<main class="container">
<!-- 標題區塊 -->
<section class="title">
<div class="title-decor">x<span></span>x</div>
<div class="title-main">
<h1>九九乘法表</h1>
<p>MULTIPLICATION TABLE</p>
</div>
<div class="title-decor">x<span></span>x</div>
</section>
<!--
內容樣板(使用 JavaScript 自動生成)
<div class="table">
<h2 class="table-title">2</h2>
<p>2 x 1 = 2</p>
<p>2 x 2 = 4</p>
<p>2 x 3 = 6</p>
<p>2 x 4 = 8</p>
<p>2 x 5 = 10</p>
<p>2 x 6 = 12</p>
<p>2 x 7 = 14</p>
<p>2 x 8 = 16</p>
<p>2 x 9 = 18</p>
</div>
-->
</main>

CSS

由於慣用 SCSS 預處理器來寫 CSS ,技術紀錄會以 SCSS 為主。

SCSS-map

這次嘗試使用 SCSS 的 map 來儲存變數,它類似於 JSON 格式,可以透過 Key/Value 匹配來儲存數值。

透過 SCSS 的 @function 建構函式,傳入參數,來獲得 map 裡對應的數值,達到管理 SCSS 變數的效果,也方便我們取用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 管理顏色
$colors:(
mainGreen: #2EB738,
secondGray: #D8D8D8,
cardWhite: #FFFFFF,
background: #F0F0F0
) ;

// 使用函式獲得對應的數值
@function color($color){
@return map-get($colors, $color) ;
}

// 管理字體大小
$fonts:(
sm: 16px,
md: 24px,
lg: 56px,
xl: 128px
) ;

// 使用函式獲得對應的數值
@function font($font){
@return map-get($fonts, $font) ;
}

Flex

排版則使用 Flex ,外層設置為內層一列三個區塊並排,三列共九個,且 flex-wrap: wrap

由於設計稿已經給定每個內容區塊的寬高,所以只要算好區塊的 margin 即可,我利用 margin-left: 30px 來推出區塊之間的空間,必須注意的是,每三個(每一列最後一個)就必須讓 margin-left: 0px ,否則第三個會因為空間不足而直接掉到下一列。可以使用 :nth-child(3n) 來處理特定數量的狀況。

為了支援響應式,在視窗小於 1280px 時版面較小,以 margin: 30px 來推出左右等距,平衡視覺。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.container{
max-width: 1280px ; // 最大寬度 1280px
margin: 0 auto ; // 左右置中
padding: 45px ;
background: color(background) ; // 使用函式獲得對應的數值
@include flex(row) ; // 額外設定 @mixin flex 來包裝 Flex 指令
flex-wrap: wrap ;

> div{
margin-right: 30px ;

@media (max-width: 1280px) {
margin: 30px ;
}
}

> div:nth-child(3n){
margin-right: 0px ;

@media (max-width: 1280px) {
margin: 30px ;
}
}
}

順帶一提, > 在 CSS 中表示選擇下一層 HTML 元素,而非後代選擇。

至於內容樣板區塊,同樣使用 Flex 排版,flex-wrap: wrap ,但 flex-direction: column ,如此一來,設置好每一個算式的寬高與 padding ,就可以達到兩行並排的效果。

內容樣板的小標題 <h2> 使用了 text-shadowtext-stroke ,讓它看起來更為立體。

內容樣板,我給了一個 table 標籤,如下方程式碼:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.table{
@include size(350px,366px) ;
background: color(cardWhite) ; // 使用函式獲得對應的數值
border-radius: 100px 30px 30px 0 ;
box-shadow: 3px 3px 10px color(secondGray) ;
margin-bottom: 40px ;
display: flex ;
flex-direction: column ;
flex-wrap: wrap ;

p{
font-size: font(md) ; // 使用函式獲得對應的數值
color: color(mainGreen) ; // 使用函式獲得對應的數值
text-align: left ;
margin: 12.5px 35px ;
}

h2{
font-size: 128px ;
color: color(mainGreen) ; // 使用函式獲得對應的數值
font-weight: bold ;
text-shadow: 4px 3px 0px color(secondGray) ;
-webkit-text-stroke: 2px color(cardWhite) ;
text-align: center ;
}
}

JavaScript

目的是利用 JavaScript 自動生成九九乘法表的內容,也就是除了大標題以外的八個區塊,重點在於算式的生成,從 2 x 2 = 4 到 9 x 9 = 81。

開發邏輯:利用 for 迴圈來遍歷數字 2 到 9 ,而每一個數字還需要遍歷數字 2 到 9 來生產算式。

整體而言是一個雙層巢狀迴圈,搭配 ES6 的樣板字串(template literal)來生成內容。如下方程式碼:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 外層 for 迴圈
for(let i = 2 ; i < 10 ; i++){
// 創造一個新的 div 元素
let tableWrap = document.createElement('div') ;
// 將該 div 元素貼上 table 標籤
tableWrap.setAttribute('class','table') ;
// 透過樣板字串生成小標
let viewContent = `<h2 class="table-title">${i}</h2>` ;

// 內層 for 迴圈
for(let j = 1 ; j < 10 ; j++){
// 透過樣板字串生成算式
viewContent += `<p>${i} x ${j} = ${i*j}</p>` ;
}

// 將生成的內容置入 div 元素中
tableWrap.innerHTML = viewContent ;

// 將 div 元素加到 .container 元素最後面(不會取代原本的內容)
document.querySelector('.container').appendChild(tableWrap) ;
}

2020 口罩存貨實時地圖開發紀錄 畫出簡單的 SVG 向量圖形

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×