先看效果：
其實寫這個挺簡單的計算用了一個table佈局。沒有其他的複雜的佈局。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算器</title>
<body>
<table align="center">
<tr>
<td colspan="4"><input type="text" id="input" readonly="readonly"></td>
</tr>
<tr>
<td colspan="4"><input type="text" id="result" readonly="readonly" ></td>
</tr>
<tr>
<td colspan="2"><button class="AC" onclick="CClicked()">AC</button></td>
<td><button id="del" onclick="DelClicked()">Ce</button></td>
<td><button class="operation" onclick="OperaClicked('/')">/</button></td>
</tr>
<tr>
<td><button class="number" onclick="NumClicked(7)">7</button></td>
<td><button class="number" onclick="NumClicked(8)">8</button></td>
<td><button class="number" onclick="NumClicked(9)">9</button></td>
<td><button class="operation" onclick="OperaClicked('*')">*</button></td>
</tr>
<tr>
<td><button class="number" onclick="NumClicked(4)">4</button></td>
<td><button class="number" onclick="NumClicked(5)">5</button></td>
<td><button class="number" onclick="NumClicked(6)">6</button></td>
<td><button class="operation" onclick="OperaClicked('+')">+</button></td>
</tr>
<tr>
<td><button class="number" onclick="NumClicked(1)">1</button></td>
<td><button class="number" onclick="NumClicked(2)">2</button></td>
<td><button class="number" onclick="NumClicked(3)">3</button></td>
<td><button class="operation" onclick="OperaClicked('-')">-</button></td>
</tr>
<tr>
<td colspan="2"><button class="number zero" onclick="NumClicked('00')">00</button></td>
<td><button class="DZero" onclick="NumClicked('0')">0</button></td>
<td><button class="operation" onclick="EqualClicked()">=</button></td>
</tr>
</table>
</body>
</head>
<style>
body{
background-color: black;
}
td > button{
height: 50px;
width: 50px;
border-radius: 50%;
font-size: 30px;
text-align: center;
background-color: rgba(226, 225, 223, 0.932);
color: white;
}
.AC{
height: 50px;
width: 100px;
}
.zero{
height: 50px;
width: 100px;
}
#result ,#input{
background-color: black;
height: 50px;
width: 200px;
resize: none;
border-color: black;
color: white;
font-size: 25px;
text-align: end;
}
.number{
background-color: rgb(100, 100, 100);
color: white;
}
.operation,.DZero{
background-color: orange;
color: white;
}
</style>
javascript自己寫吧！因爲一些原因不能發出來，可以去搜索一下
//提示可以用eval()自帶的方法。。