來到第二個小練習，今天要做的是數值相加！
我參考的網站因為有點舊了，加上建立這個網站的老師目的單純是 for Javascript 教學，所以沒有做版面美化，今天練習也順便加上一點 CSS 讓版面好看一點吧～
先來看個完成後的樣子
開始練習吧！
看一下原版的程式
按照這個邏輯依樣畫葫蘆，再依照自己的喜愛做一點調整，先寫好 HTML 的部分，把 Javascript 的程式碼搬到 JS 的欄位～
來看 HTML 的部分
HTML 裡有一個 form ， ID 名稱叫做 form。
原版的程式 ID 名稱叫做「form1」，但因為從頭到尾只有用到一個 form，所以我把「form1」改成「form」。
form 裡面裝有兩個數值，輸入格式是 text ，並將它們用<br>斷行。
再來有一個按鈕，中間顯示的文字依照我喜歡的去更改，然後按鈕點擊後要呼叫 JS 的函式，名稱叫做 add()。
最後是數值相加後回傳答案的格子，使用 <p> 來做，並且給他一個 ID 名稱叫做 demo，讓 JS 程式回傳值。
接下來來看 JS 的部分
要讓網頁有反應跟互動性，所以要加上 JS ～
新增一個函式叫做 add()，名稱對照前面 HTML 的命名。
接下來是函式裡面包的程式，
宣告變數：
numbers 是從我的網頁抓取 ID 名稱 叫做 form 的元素；
answer 是從 numbers 抓取並轉換成數字的第 0 個元素 + 第 1 個元素。
*parseInt() 是將輸入的字串轉換成數字
接下來使用 innerHTML 將前面 answer 計算出的結果推回 demo 顯示出來。
其實到這裡就算是完成了，但版面的長相實在有點陽春，所以來幫它加上 CSS 樣式裝飾一下。
CSS 的部分
先在 HTML 的部分，幫剛剛寫的所有物件包一層外層容器(container)。
1
| <div class=”container”> </div>
|
接下來就可以幫每個物件加上樣式。
container 的樣式
1
2
3
4
5
6
7
8
| padding: 10 px; // 內距 10 px
width: 150 px; height: 150 px; //寬高各 150 px
background-color: pink; //粉紅色的背景
display: flex; //顯示方式給他一個 flex ，讓裡面的物件橫向排列
flex-wrap: wrap; //代表要換行
justify-content: center; //對齊主軸線中央
align-items: center; //對齊交錯軸線中央
|
1
2
3
4
| margin: 5 px; //內距 5 px
width: 50 px; //寬 50 px
border: 1px solid gray; //邊框粗 1 px 實線 灰色
border-radius: 5 px; //邊框圓弧 5 px
|
1
2
3
4
5
| margin: 5 px; //外距 5 px
padding: 5 px; //內距 5 px
border: 1px solid yellow; //邊框粗 1 px 實線 黃色
border-radius: 10 px; //邊框圓弧 10 px
background-color: lightgoldenrodyellow; //背景顏色亮金黃色
|
p 的樣式
1
2
3
| width: 50px; //寬 50 px
height: 10px; //高 10 px
text-align: center; //文字置中對齊
|
到這邊大致上版面已經看起來華麗很多了，但按鈕好像還可以再多些什麼，所以幫按鈕再加上滑鼠移入時的特效（Hover），我加入的是內部陰影效果，讓按鈕看起來有點浮凸的感覺。
這樣按鈕在滑鼠移入時就會長這樣
語法
1
2
3
| button:hover{
box-shadow: inset -1px -1px 3px 0px rgba(0,0,0,0.75);
}
|
好了！ 這次的練習就到這裡囉～
附上完整程式碼
1
2
3
4
5
6
7
8
| <div class=”container”>
<form id=”form”>
數值 1：<input type=”text”><br>
數值 2：<input type=”text”><br>
</form>
<button onclick=”add()”> 兩數值相加 </button>
<p id=”demo”></p>
</div>
|
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
27
28
29
30
31
32
| .container {
padding: 10 px;
width: 150 px;
height: 150 px;
background-color: pink;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
input {
margin: 5 px;
width: 50 px;
border: 1 px solid gray;
border-radius: 5 px;
}
button,
p {
margin: 5 px;
padding: 5 px;
border: 1 px solid yellow;
border-radius: 10 px;
background-color: lightgoldenrodyellow;
}
p {
width: 50 px;
height: 10 px;
text-align: center;
}
button:hover {
box-shadow: inset -1px -1px 3px 0px rgba(0, 0, 0, 0.75);
}
|
1
2
3
4
5
6
| function add() {
const numbers = document.getElementById(“form”);
const answer =
parseInt(numbers.elements[0].value) + parseInt(numbers.elements[1].value);
document.getElementById(“demo”).innerHTML = answer;
}
|
參考資料：Javascript教學網站
