用HTML+CSS+JS制作了一个简单的计算器，它的使用类似于生活中使用的计算器。暂时未发现有任何计算上的错误，有问题请联系我，谢谢。
最终成果图：
HTML代码块：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计算器</title>
<link rel="stylesheet" href="./css/normalize_14.css">
<link rel="stylesheet" href="./css/calculator.css">
</head>
<body>
<main>
<table>
<thead>
<tr>
<th colspan="5">
<input type="text" class="result" disabled>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button onclick="mC()">MC</button>
</td>
<td>
<button onclick="mAdd()">M+</button>
</td>
<td>
<button onclick="mSub()">M-</button>
</td>
<td>
<button onclick="mR()">MR</button>
</td>
</tr>
<tr>
<td>
<button onclick="c()">C</button>
</td>
<td>
<button onclick="reverse()">±</button>
</td>
<td>
<button class="calculate" value="/">/</button>
</td>
<td>
<button class="calculate" value="*">*</button>
</td>
</tr>
<tr>
<td>
<button class="calculate" value="7">7</button>
</td>
<td>
<button class="calculate" value="8">8</button>
</td>
<td>
<button class="calculate" value="9">9</button>
</td>
<td>
<button class="calculate" value="-">-</button>
</td>
</tr>
<tr>
<td>
<button class="calculate" value="4">4</button>
</td>
<td>
<button class="calculate" value="5">5</button>
</td>
<td>
<button class="calculate" value="6">6</button>
</td>
<td>
<button class="calculate" value="+">+</button>
</td>
</tr>
<tr>
<td>
<button class="calculate" value="1">1</button>
</td>
<td>
<button class="calculate" value="2">2</button>
</td>
<td>
<button class="calculate" value="3">3</button>
</td>
<td rowspan="2">
<button onclick="equal()">=</button>
</td>
</tr>
<tr>
<td colspan="2">
<button class="calculate" value="0">0</button>
</td>
<td>
<button class="calculate" value=".">.</button>
</td>
</tr>
</tbody>
</table>
</main>
<script src="./js/jquery-2.1.4/jquery.min.js"></script>
<script src="./js/calculator.js"></script>
</body>
</html>
CSS代码块：
@font-face {
font-family: "digital";
src: url(./../font/digital-7_mono.ttf);
}
main {
background-color: #a6d79a;
position: fixed;
width: 100%;
height: 100%;
}
main>table {
margin: 50px auto;
background-color: #f2f2f2;
border-radius: 5px;
}
main>table>thead>tr>th>input {
width: 450px;
height: 60px;
margin: 10px 0;
border: 1px solid #eaeaea;
background-color: #1c1c1c;
color: white;
font-family: "digital";
text-align: right;
font-size: 28px;
}
main>table>tbody>tr>td>button {
width: 100px;
height: 60px;
margin: 10px;
color: #3f3f3f;
outline: none;
background-color: #f4f4f4;
border: 1px solid #eaeaea;
}
main>table>tbody>tr>td>button:active {
border-color: #3f3f3f;
}
main>table>tbody>tr:nth-child(5)>td:nth-child(4)>button {
width: 100px;
height: 140px;
}
main>table>tbody>tr:nth-child(6)>td:nth-child(1)>button {
width: 220px;
height: 60px;
}
JS代码块：
let arr = [0]; //公式数组
let result = ""; //输入的数字
// 计算器计算
$(document).ready(function () {
$(".result").val(0);
$(".calculate").on("click", function () {
let nums = $(this).val(); //通过按键输入
if (!isNaN(nums) || nums == ".") {
if (result == "" && nums == ".") {
result = "0.";
} else if(result == "0" && nums == "0") {
result = "0";
} else if(result == "0" && nums != "0" && nums != ".") {
result = "";
result += nums;
} else if (!(result.includes(".") && nums == ".")) {
result += nums;
}
$(".result").val(result);
} else {
if (arr[1] != null && result != "") {
arr[2] = $(".result").val();
let result = calcu(arr[1], arr[0], arr[2]);
$(".result").val(result);
arr[0] = result;
arr[2] = null;
} else {
arr[0] = $(".result").val();
}
arr[1] = nums;
result = "";
}
});
});
//计算
function calcu(sym, num1, num2) {
let result = 0;
num1 = num1 - 0;
num2 = num2 - 0;
switch (sym) {
case "+": {
result = num1 + num2;
break;
}
case "-": {
result = num1 - num2;
break;
}
case "*": {
result = num1 * num2;
break;
}
case "/": {
result = num1 / num2;
break;
}
}
return parseFloat(result.toFixed(10)); //取准确小数结果
}
//等号计算
function equal() {
if (arr[1] != null && result != "") {
let num = $(".result").val();
let result = calcu(arr[1], arr[0], num);
$(".result").val(result);
arr[0] = result;
arr[1] = arr[2] = null;
} else if(arr[1] == null) {
arr[0] = $(".result").val();
$(".result").val(arr[0]);
} else {
$(".result").val(arr[0]);
arr[1] = null;
}
result = "";
}
//清除屏幕
function c() {
arr = [0];
result = "";
$(".result").val(0);
}
//取相反数
function reverse() {
let num = $(".result").val();
$(".result").val(-num);
}
let memory = 0;
//归零目前记忆的数字
function mC() {
memory = 0;
result = "";
}
// 记忆当前数字，加入累加数字当中
function mAdd() {
let addNum = $(".result").val() - 0;
memory += addNum;
result = "";
}
//记忆当前数字，总数扣除当前数字
function mSub() {
let subNum = $(".result").val() - 0;
memory -= subNum;
result = "";
}
// 将当前计算出来的数字呈现
function mR() {
$(".result").val(memory);
result = "";
}
注：需要代码的也可以从我的主页上传文件中自取。