首先先代码献上
接下来是css
table,tr,td{
text-align: center;
border: 1px ridge black;
border-collapse: collapse;
text-align: center;
}
.btnx{
font-weight: 900;
}
.btn,.btnx{
height: 100%;
width: 100%;
}
.btn{
background-color: #f0f0f0;
}
tr{
height:30px;
}
td{
width: 30px;
}
#block{
height: 100%;
width: 100%;
}
对于这次的任务，可以说是对我们极大的考验，在寻找答案的时候也发现了不少解决的方法，这段代码是我见到的最精简的，所以我用了这个方式做了个这个任务。
首先就是计算机的外观部分，用表格很容易就可以制作而成，比较重点的是colspan的使用，让计算器变得更好看，最重点的是输出数字的地方只能用input，不能有其他的否则无法输入进去（也可能是我js没有掌握吧）。
在js中的思路是这样子的：
获取数字和加减乘除符号的值中，使用onclicknum(nums)函数，这时候传入参数，在HTML中设置传入参数的值，就这样可以很简单的传入参数也就是第一个value 的值，然后连接第二个value的值，用str.value来表示两者的和，就这样做成了一长串数字。
第二个函数时清除函数，制作onclickclear()函数，让str.value的值清除就可以了。
第三个函数是结果计算，制作onclickresult()函数，同时还得使用eval（)函数将str.value的值计算出来。
原本打算制作一个backspace的，但是询问过学长后发现要制作一个栈，对于还没接触数据结构的我们肯定是没办法完成的，之后让这个计算器少了点功能，使用CE勉强用吧。
最后有几点不足之处，用户可以在结果上继续输入数字，而我想的是得出结果后如果继续点击数字的话会从头开始输入，希望以后可以实现这段代码。
还有就是可以运算符在第一个使用导致没有意义，应该设置为如果前面没有数字则无法输入运算符。
原本这个任务是要求用jQuery使js代码变得更简单的，然后把js代码写入一个文件中，不过经过了几天的尝试之后，我没能完成这两个任务。。。应该是学习js尚浅，导致了很多错误无法解决，所以我接下来一定好好学js。。。争取能够完善这段代码吧。
成果如图。
——————————————————这是华丽的分界线——————————————————
经过我一个小时的修改，终于可以引进js文件了
<html>
<head>
<title>网页计算机</title>
<link rel="stylesheet" href="style/style.css">
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<table style=" height: 400px; width: 270px">
<tr>
<td colspan="4"><input type="text" id="block" style="font-size: 30px"> </td>
</tr>
<tr>
<td colspan="3"><input type="button" class="btn" value=" CE " onclick="onclickclear()"></td>
<td><input type="button" class="btn" value=" / " onclick="onclicknum('/')" ></td>
</tr>
<tr>
<td><input type="button" class="btnx" value="7" onclick="onclicknum(7)"></td>
<td><input type="button" class="btnx" value="8" onclick="onclicknum(8)"></td>
<td><input type="button" class="btnx" value="9" onclick="onclicknum(9)"></td>
<td><input type="button" class="btn" value="×" onclick="onclicknum('*')"></td>
</tr>
<tr>
<td><input type="button" class="btnx" value="4" onclick="onclicknum(4)"></td>
<td><input type="button" class="btnx" value="5" onclick="onclicknum(5)"></td>
<td><input type="button" class="btnx" value="6" onclick="onclicknum(6)"></td>
<td><input type="button" class="btn" value="－" onclick="onclicknum('-')"></td>
</tr>
<tr>
<td><input type="button" class="btnx" value="1" onclick="onclicknum(1)"></td>
<td><input type="button" class="btnx" value="2" onclick="onclicknum(2)"></td>
<td><input type="button" class="btnx" value="3" onclick="onclicknum(3)"></td>
<td><input type="button" class="btn" value="+" onclick="onclicknum('+')"></td>
</tr>
<tr>
<td><input type="button" class="btnx" value="." onclick="onclicknum('.')"></td>
<td><input type="button" class="btnx" value="0" onclick="onclicknum(0)"></td>
<td colspan="2"><input type="button" class="btn" value="=" onclick="onclickresult()"></td>
</tr>
</table>
</body>
<script src="js/size.js"></script>接下来是js文件
var numresult;
var str;
str = document.getElementById("block");
function onclicknum(nums) {
str.value += nums;
}
function onclickclear() {
str.value = "";
}
function onclickresult() {
numresult = eval（str.value);
str.value = numresult;
}接下来是css文件
table,tr,td{
text-align: center;
border: 1px ridge black;
border-collapse: collapse;
text-align: center;
}
.btnx{
font-weight: 900;
}
.btn,.btnx{
height: 100%;
width: 100%;
}
.btn{
background-color: #f0f0f0;
}
tr{
height:30px;
}
td{
width: 30px;
}
#block{
height: 100%;
width: 100%;
}这次修改解决了无法导入js文件的问题，不过还是没把jQuery文件用上，希望以后可以解决吧
