今天繼續學習JavaScript，視頻講的確實挺差勁的。還是只能跟著W3School自己慢慢摸索著弄了。自己百度了一下，參考了一個大佬寫的一個簡單的計算器代碼。代碼能跑通，但是做出來的樣子實在是感覺太丑了。做完以後自己又把樣式重新寫了一遍。結果就變成這樣的了。下面就是今天的代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JSNote1</title>
<style>
body{
margin: 10%;
padding: 2%;
}
.tab1{
margin-left: 20%;
margin-right: 20;
width: 60%;
padding: 2%;
color: #00F84A;
background-color: #1D3F39;
text-align: center;
border: 2px solid #0200FF;
border-radius: 25px;
box-shadow: 2px 2px 0 3px #424242;
}
.tabbt1{
width: 50px;
height: 50px;
border-radius: 50%;
color: #00FF8C;
background-color: #673ECB;
font-size: 25px;
}
th,td,tr{
width: 25%;
}
.input1{
margin: 1%;
padding: 3%;
width: 80%;
font-size: 20px;
color: #FF1801;
border-radius: 5px;
box-shadow: 1px 1px 0 2px #424242;
}
</style>
</head>
<body>
<p>用JS做一個簡單的網頁計算器</p>
<!--
需求,做一個可以輸入兩個數值,讓這兩個數值可以做四則運算的計算器
步驟,1,做script方法
2,做一個表格
3,設計表格樣式
4,用表格内的元素調用script中的方法
-->
<script>
// 定義相加的方法
function sum(){
// 獲取第一個表格數值,默認值為0
var def1 = 0;
n1 = Number(document.getElementById("tab1").value);
// 獲取第二個表格數值,默認值為0
var def2 = 0;
n2 = Number(document.getElementById("tab2").value);
// 定義加法
sum = n1+n2;
// 將結果輸出,用一個變量result接收
document.getElementById("result").value=sum;
}
// 定義相減的方法
function minus(){
var min=0;
min=n1-n2;
document.getElementById("result").value=min;
}
// 定義乘法
function multiply(){
var mul=0;
mul=n1*n2;
document.getElementById("result").value=mul;
}
// 定義除法
function division(){
var divi=0;
divi=n1/n2;
document.getElementById("result").value=divi;
}
</script>
<table class="tab1">
<tr>
<th colspan="4">這是一個JS代碼寫的計算器</th>
</tr>
<tr>
<td colspan="4"><input type="text" placeholder="請輸入第一個數字" id="tab1" class="input1"></td>
</tr>
<tr>
<td colspan="4"><input type="text" placeholder="請輸入第二個數字" id="tab2" class="input1"></td>
</tr>
<tr>
<td><input type="submit" value="+" onClick="sum()" class="tabbt1"></td>
<td><input type="submit" value="-" onClick="minus()" class="tabbt1"></td>
<td><input type="submit" value="*" onClick="multiply()" class="tabbt1"></td>
<td><input type="submit" value="/" onClick="division()" class="tabbt1"></td>
</tr>
<tr>
<td>Result結果</td>
<td colspan="3"><input type="text" id="result" class="input1"></td>
</tr>
</table>
</body>
</html>