当前位置：首页 > news >正文

用script实现的一个简易计算机

news 来源：原创 2024/9/20 0:41:01

一、计算器原理

二、源码

三、结果展示

四、不足与改进

一、计算器原理

首先我们列出想象中简易计算器的样子：

虽然画的磕碜但是应该不影响下面的操作hh

首先想到用表格形式在网页中表示它，是一个5行4列的表格，接着要实现计算器的功能，每个按钮都需要添加事件--->onclick()当鼠标点击时触发，所有的数字和运算符都要使用onclick触发，等于号和c(清空键)较为特殊，他们需要对应与数字和普通运算符不同的事件：计算结果和清空输入。以及最上方的显示块需要时刻与输入的内容对应也是不同的事件。

运算的过程较为简单，只使用了eval()函数进行计算。

最后就是对计算器输入过程的修饰，计算过程不能出现数字后跟多个运算符的情况，如5++或5+-*/，这样会导致eval()函数无法正常计算，所以需要对输入时的事件进行休整。

二、源码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>table {border: 10px;margin: auto;}td {border: 2px solid black; //单元格边框text-align: center;/*单元格内容居中*/padding: 20px;/*内边距*/}</style></head><body><table><tr><td colspan="4" id="result"></td></tr><tr><td onclick="appendresult('7')">7</td><td onclick="appendresult('8')">8</td><td onclick="appendresult('9')">9</td><td onclick="appendresult('+')">+</td></tr><tr><td onclick="appendresult('4')">4</td><td onclick="appendresult('5')">5</td><td onclick="appendresult('6')">6</td><td onclick="appendresult('-')">-</td></tr><tr><td onclick="appendresult('1')">1</td><td onclick="appendresult('2')">2</td><td onclick="appendresult('3')">3</td><td onclick="appendresult('*')">*</td></tr><tr><td onclick="appendresult('0')">0</td><td id="clear" onclick="clearall()">c</td><td onclick="caculate()">=</td><td onclick="appendresult('/')">/</td></tr></table></body><script>var inputment = ""; //输入的内容function appendresult(value) {// 判断value是数字还是符号if (value == "+" || value == "-" || value == "*" || value == "/") {// 检查最后一个字符是否为运算符if (inputment.length > 0 && (inputment[inputment.length - 1] == "+" ||inputment[inputment.length - 1] == "-" ||inputment[inputment.length - 1] == "*" ||inputment[inputment.length - 1] == "/")) {return; // 如果是运算符，则不添加新的运算符，return不进行任何操作}inputment += value; // 添加新的运算符} else {// 如果是数字，直接添加inputment += value;}update();}function caculate() {var result = eval(inputment);inputment = result.toString(); //更新全局变量update();}function update() {document.getElementById("result").innerText = inputment || "0";}function clearall() {document.getElementById("result").innerText = "";inputment = "";}</script>
</html>

三、结果展示

可以看到不会出现多个运算符重复出现的错误。

四、不足与改进

在制作此计算器时，用的是表格来表示计算器，没有考虑到点击形式的问题，使得在使用时鼠标全程是I的状态，不是点击状态，用起来十分别扭，除了将整个表格变成<input>中的按钮状态外，有更便捷的方法来解决：

可以在td的类选择器中添加

cursor: pointer; /* 鼠标悬停时显示手型光标 */

为了使用时更加便捷，还可以使用伪类添加鼠标悬停时的背景色以及点击时的背景色：

td:hover { background-color: #f0f0f0; /* 鼠标悬停时的背景色 */ }

td:active { background-color: #d0d0d0; /* 点击时的背景色 */ }

最后的效果：

此时的鼠标放在了数字7上，并且是点击态，再点击后颜色会加深一点。

改进后的代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>table {border: 10px;margin: auto;}td {border: 2px solid black; //单元格边框text-align: center;/*单元格内容居中*/padding: 20px;/*内边距*/cursor: pointer;/* 鼠标悬停时显示手型光标 */}td:hover {background-color: #f0f0f0;/* 鼠标悬停时的背景色 */}td:active {background-color: #d0d0d0;/* 点击时的背景色 */}</style></head><body><table><tr><td colspan="4" id="result"></td></tr><tr><td onclick="appendresult('7')">7</td><td onclick="appendresult('8')">8</td><td onclick="appendresult('9')">9</td><td onclick="appendresult('+')">+</td></tr><tr><td onclick="appendresult('4')">4</td><td onclick="appendresult('5')">5</td><td onclick="appendresult('6')">6</td><td onclick="appendresult('-')">-</td></tr><tr><td onclick="appendresult('1')">1</td><td onclick="appendresult('2')">2</td><td onclick="appendresult('3')">3</td><td onclick="appendresult('*')">*</td></tr><tr><td onclick="appendresult('0')">0</td><td id="clear" onclick="clearall()">c</td><td onclick="caculate()">=</td><td onclick="appendresult('/')">/</td></tr></table></body><script>var inputment = ""; //输入的内容function appendresult(value) {// 判断value是数字还是符号if (value == "+" || value == "-" || value == "*" || value == "/") {// 检查最后一个字符是否为运算符if (inputment.length > 0 && (inputment[inputment.length - 1] == "+" ||inputment[inputment.length - 1] == "-" ||inputment[inputment.length - 1] == "*" ||inputment[inputment.length - 1] == "/")) {return; // 如果是运算符，则不添加新的运算符，return不进行任何操作}inputment += value; // 添加新的运算符} else {// 如果是数字，直接添加inputment += value;}update();}function caculate() {var result = eval(inputment);inputment = result.toString(); //更新全局变量update();}function update() {document.getElementById("result").innerText = inputment || "0";}function clearall() {document.getElementById("result").innerText = "";inputment = "";}</script>
</html>