JS实现简单计算器（一）

写个四则运算的函数很简单，实现一个计算器的页面真是累死个人。。。

能够进行简单的四则运算，效果基本与win10自带计算器相同。
第一版没有括号，平方，存储历史记录等功能，后续添加。。。
截图如下

思路：主要是将输入的运算式，中缀改后缀，然后运算得出结果。不过植入页面，会有输入输出各方面的一些小问题，导致代码变多了不少。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Calculator</title><link rel="stylesheet" href="./index.css">
</head>
<body><h2>计算器1.0</h2><div class="calc-wrap"><div class="calc-in-out"><!-- 上一条运算记录 --><p class="calc-history" title=""></p><!-- 运算等式 --><p class="calc-in"></p><!-- 输入的数字和输出的运算结果 --><p class="calc-out active">0</p></div><table class="calc-operation"><thead></thead><tbody><tr><td data-ac="cls" class="cls">C</td><td data-ac="del">&larr;</td><td data-ac="sq">x<sup>2</sup></td><td data-ac="*">&times;</td></tr><tr><td data-val="7">7</td><td data-val="8">8</td><td data-val="9">9</td><td data-ac="/">&divide;</td></tr><tr><td data-val="4">4</td><td data-val="5">5</td><td data-val="6">6</td><td data-ac="+">+</td></tr><tr><td data-val="1">1</td><td data-val="2">2</td><td data-val="3">3</td><td data-ac="-">-</td></tr><tr><td data-ac="per">%</td><td data-val="0">0</td><td data-ac="dot">.</td><td data-ac="eq" class="eq">=</td></tr></tbody></table></div><script src="./index.js"></script>
</body>
</html>

CSS代码

body {padding: 20px;font-family: Arial, Helvetica, sans-serif;
}
.calc-wrap {width: 300px;border: 1px solid #ddd;border-radius: 3px;
}.calc-operation {width: 100%;border-collapse: collapse;
}
.calc-operation td {padding: 10px;width: 25%;text-align: center;border: 1px solid #ddd;font-size: 26px;color: #888;cursor: pointer;
}.calc-operation .cls {color: #ee8956;
}.calc-operation td:active {background-color: #ddd;
}.calc-in-out {width: 100%;padding: 10px 20px;text-align: right;box-sizing: border-box;background-color: rgba(250, 250, 250, 0.9);
}.calc-in-out p {overflow: hidden;margin: 5px;width: 100%;
}.calc-history {margin-left: -20px;font-size: 18px;color: #bbb;border-bottom: 1px dotted #ddf;min-height: 23px;
}.calc-in,
.calc-out {font-size: 20px;color: #888;line-height: 39px;min-height: 39px;
}.calc-in {color: #888;
}.calc-out {color: #ccc;
}.calc-in.active,
.calc-out.active {font-size: 34px;color: #666;
}

JS代码

var tds = document.getElementsByTagName('td');
var cls = document.getElementsByClassName('cls')[0];
var equal = document.getElementsByClassName('eq')[0];
var input = document.getElementsByClassName('calc-in')[0];
var output = document.getElementsByClassName('calc-out')[0];let isAgainInput = true;
let res = 0;
// 给每一个按键添加事件
for (let i = 0; i < tds.length; i++) {tds[i].onclick = function () {// 重新输入if (isAgainInput) {if (this.dataset.val) {// 是否接着运算式中继续运算if (isNumber(input.textContent[input.textContent.length - 1])) {input.innerHTML = '';}output.innerHTML = this.dataset.val;deleteZero();isAgainInput = false;} else {// 输入了运算符，就加到上面的运算式里input.innerHTML = output.innerHTML + this.dataset.ac;}} else {// 继续输入if (this.dataset.val) {// 输入的是数字就一直加output.innerHTML = output.innerHTML + this.dataset.val;deleteZero();} else {// 输入了运算符，就加到上面的运算式里，并清空outputinput.innerHTML = input.innerHTML + output.innerHTML + this.dataset.ac;output.innerHTML = '';}}};
}
// 判断字符是否是数字
function isNumber(ch) {return ch - '0' >= 0 && ch - '0' <= 9;
}
// 判断输入开头的0
function deleteZero() {let num = output.innerHTML;if (num.length > 1 && num[0] === '0') {output.innerHTML = num.slice(1);}
}// 归零键事件
cls.onclick = function () {input.innerHTML = '';output.innerHTML = 0;
};// 等于键事件
equal.onclick = function () {// 把output中还存在数字添加进运算式中input.innerHTML = input.innerHTML + output.innerHTML;let str = input.innerText || input.textContent;res = calculate(str);output.innerHTML = res;isAgainInput = true;
};// 中缀表达式变后缀表达式
function changeToBack(str) {const stack = [];const res = [];const priority = {'+': 1,'-': 1,'*': 2,'/': 2,};for (let i = 0; i < str.length; i++) {let num = str[i] - '0';if (num >= 0 && num <= 9) {let { totalNum, index } = getNum(str, i);stack.push(totalNum);i = index;} else {// 是操作符// 栈为空，或操作符优先级大于栈顶，导入栈中if (stack.length === 0 ||priority[str[i]] > priority[stack[stack.length - 1]]) {stack.push(str[i]);} else {do {res.push(stack.pop());} while (priority[str[i]] <= priority[stack[stack.length - 1]]);stack.push(str[i]);}}}while (stack.length) {res.push(stack.pop());}console.log(res);return res;
}// 考虑多位数的情况
function getNum(str, index) {let totalNum = 0;while (true) {let n = str[index] - '0';if (n <= 9 && n >= 0) {totalNum = totalNum * 10 + n;index++;} else break;}return {totalNum,index: index - 1,};
}// 计算表达式
function calculate(str) {arr = changeToBack(str);let stack = [];for (let i = 0; i < arr.length; i++) {if (typeof arr[i] === 'number') {stack.push(arr[i]);} else {let num2 = stack.pop();let num1 = stack.pop();if (arr[i] == '+') {stack.push(num1 + num2);} else if (arr[i] == '-') {stack.push(num1 - num2);} else if (arr[i] == '*') {stack.push(num1 * num2);} else if (arr[i] == '/') {stack.push(num1 / num2);}}}return stack[0];
}

JS实现计算器（一）相关推荐

html css制作计算器,使用html+css+js实现计算器
使用html+css+js实现计算器,开启你的计算之旅吧效果图: 代码如下,复制即可使用: /* 主体 */ .counter{ width: 396px; height: 486px; backg ...
使用html css js实现计算器
使用html css js实现计算器,开启你的计算之旅吧效果图: 代码如下,复制即可使用: <!DOCTYPE html><html lang="en"> ...
用统计功能计算机计算js,js实现计算器功能
本文实例为大家分享了js实现计算器功能的具体代码,供大家参考,具体内容如下知识点 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 代码如下 js计算器计算器 .h ...
最简单的用js模拟计算器进行计算(初级)
用js模拟计算器进行计算今天我们来讲一下怎么使用js来模拟计算器的加减乘除基本运算.代码如下: HTML代码: <h1>计算器</h1><input type=&quo ...
html css js实现快递单打印_html+css+js实现计算器
相比其他得实现代码来说这个界面会比较美观 index.html <html xmlns="http://www.w3.org/1999/xhtml"><head ...
html算术计算,js实现计算器提供算术表达式求值
//html 计算器 @import "calculator.css"; //CSS /* CSS Document */ body { /* padding-right:40 ...
js怎么把按钮往下移_Vue.js 实现计算器
实现了一个简单的计算器,使用了 Grid 布局,使用了事件委托来分别处理不同按钮的点击,使用了 Vue.js 框架,使用了栈数据结构来处理十进制转二进制的运算,使用了递归来处理先乘除后加减的运算,然后 ...
js装修计算器java代码_JavaScript代码实现简单计算器
本文实例为大家分享了JavaScript代码实现简单计算器的具体代码,供大家参考,具体内容如下一.实现功能 (1)利用css样式.javascript语言和html语言实现计算器的算法 (2)对计算 ...
js装修计算器java代码_JS制作简易计算器的实例代码
做一个简易计算器,效果图片 c表示清空,为一个空字符串 +/-表示该值为正还是负 %表示当前值/100 ←表示退格,往前删除一个值 eval 函数是能够计算出字符串表达式或者语句的结果,把结果求出来. ...
JS实现计算器，带三角函数，根号
极简主义网页计算器. 实现了按键特效,可响应键盘按键,实时显示计算结果. 可切换模式,拓展高级功能,包括根号.三角函数.括号等. 效果如下: 代码如下: html: <!DOCTYPE html ...

JS实现计算器（一）

JS实现简单计算器（一）

JS实现计算器（一）相关推荐

最新文章

热门文章