下载文档原格式
JavaScript实现简单⽹页版计算器背景由于我⼜被分进了⼀个新的项⽬组，该项⽬需要⽤js，因为我没接触过，所以领导准备给我⼀周时间学习，没错，实现⼀个简单的⽀持四则混合运算的计算器就是作业，所以有了这篇⽂章故，这篇⽂章主要重点就不在html和css了，毕竟我也只是略懂⽪⽑，并未深究过实现效果最终展现的页⾯如下图，当⿏标点击按键时，按键会变⾊，可以进⾏四则混合运算上⾯⼀⾏显⽰计算式，当按下“=”时，显⽰计算结果⽤到的技术计算器的页⾯是使⽤html的table绘制的按键的⼤⼩，颜⾊，⿏标悬浮变⾊是⽤css设置的点击按键将按键上的值和计算结果显⽰在最上⾯⼀⾏、完成四则混合运算是⽤js做的实现思路这⾥我分了三个⽂件，⼀个.html ⼀个 .css ⼀个 .js1、先写了html和css，绘制出来⽹页展⽰的样⼦，此处不细说，有兴趣可以直接看代码2、然后⽤js的DOM事件，给不同类型的按钮加上点击事件，调⽤不同的js函数。
这⼀步我开始只是先写了⼀个函数定义，主要是为了先划分清楚逻辑，⽐如按某个按键应该实现哪些功能，显⽰什么效果等，后⾯对函数进⾏填充逻辑就不会乱掉3、最后去实现js函数，也就是完成四则混合运算，重点说⼀下是怎么实现四则混合运算并且让结果显⽰出来的上⾯显⽰算式和结果的时候，我定义了⼀个全局变量的数组，每次点击按键，就把点击的那个按键的值push到数组⾥，这样显⽰的时候就直接把数组丢过去。
这样做的还有⼀个原因是点击退格键的时候就pop⼀下，点击清空键的时候就直接赋个空数组给数组变量，操作起来会容易⼀些接着很重要的⼀步是计算表达式，⽐如说输⼊ 3 * 4.5 - 1= 这样的⼀个表达式，怎么去求值呢，我想到的⽅法是先把输⼊的数组变成变成中缀表达式，再由中缀表达式转成后缀表达式，然后再进⾏后缀表达式求值1. ⾸先通过上⾯的数组处理得到了这样的⼀个数组['3','*','4','.','5','-','1']2. 把这个数组转换成字符串变为这样 “3*4.5-1”3. 接着处理成操作符和数字分开的新的数组 ['3','*','4.5','-','1']4. 处理完之后就是利⽤栈来将中缀表达式变为后缀表达式5. 再利⽤栈对后缀表达式求值，并且将结果填在=之后由于4.5步是数据结构中栈应⽤的内容，不清楚的可以回顾⼀下数据结构，⾄此就全部完成具体实现代码如上，分析的已经够多了，所以这块就话不多说，直接上代码.html⽂件<!DOCTYPE html><html><head><title>calculator</title><link rel="stylesheet" href="calculator.css" ><script src="calculator.js"></script></head><body><div><table border="1"><thead><th colspan="4"><input type="text" id="result" disabled></th></thead><tbody><tr><td><button class="operate" onclick="showNumber(this)">(</button></td><td><button class="operate" onclick="showNumber(this)">)</button></td><td><button class="operate" onclick="clearOneResult()">←</button></td><td><button class="operate" onclick="clearResult()">C</button></td></tr><tr><td><button class="calculate" onclick="showNumber(this)">7</button></td><td><button class="calculate" onclick="showNumber(this)">8</button></td><td><button class="calculate" onclick="showNumber(this)">9</button></td><td><button class="operate" onclick="showNumber(this)">*</button></td></tr><tr><td><button class="calculate" onclick="showNumber(this)">4</button></td><td><button class="calculate" onclick="showNumber(this)">5</button></td><td><button class="calculate" onclick="showNumber(this)">6</button></td><td><button class="operate" onclick="showNumber(this)">-</button></td></tr><tr><td><button class="calculate" onclick="showNumber(this)">1</button></td><td><button class="calculate" onclick="showNumber(this)">2</button></td><td><button class="calculate" onclick="showNumber(this)">3</button></td><td><button class="operate" onclick="showNumber(this)">+</button></td></tr><tr><td><button class="calculate" onclick="showNumber(this)">0</button></td><td><button class="calculate" onclick="showNumber(this)">.</button></td><td><button class="operate" onclick="showNumber(this)">/</button></td> <td><button class="operate" onclick="showAnswer()">=</button></td></tr></tbody></table></div></body></html>.css⽂件table{margin: 20px;padding: 1px;}th,input{height: 120px;width: 410px;background-color:rgb(233, 232, 232);text-align: right;font-size: 40px;}button{height: 100px;width: 100px;padding: 0px;font-size: 30px;}th,input,td,button{border: 0px;}.calculate{background-color: rgb(231, 231, 235);}.operate{color: coral;}button:hover{background-color: rgb(147, 241, 253);}.js⽂件var result = new Array();var ops = "+-*/";function arrToStr(arr) {var strResult = "";for (var i = 0; i < arr.length; i++) {strResult += arr[i];}return strResult;}function showResult() {document.getElementById("result").value = arrToStr(result);}function showNumber(id) {var val = id.innerHTML;result.push(val);showResult();}function showAnswer() {var answer = "";var str = arrToStr(result);var midExpre = strToExpress(str);var suffixExpre = midToSuffix(midExpre);answer = suffixValue(suffixExpre);//console.log(midExpre);//console.log(suffixExpre);document.getElementById("result").value = str + "=" + answer;}function clearResult() {result = [];showResult();}function clearOneResult() {result.pop();showResult();}function strToExpress(str) {var textArr = str.split('');var newTextArr = [];var calTextArr = [];for (var i = 0; i < str.length; i++) {if (ops.indexOf(str[i]) != -1 ) {newTextArr.push("|", str[i], "|");}else if (str[i] == '('){newTextArr.push(str[i], "|");}else if (str[i] == ')'){newTextArr.push("|", str[i]);}else {newTextArr.push(textArr[i]);}}calTextArr = newTextArr.join('').split('|');return calTextArr;}function midToSuffix(midExpre) {var opStack = [];var suffixExpre = [];for (var i = 0; i < midExpre.length; i++) {if (ops.indexOf(midExpre[i]) != -1 || midExpre[i] == '(' || midExpre[i] == ')' ) {if (midExpre[i] == '(' || opStack[opStack.length - 1] == '(') {opStack.push(midExpre[i]);}else if (midExpre[i] == ')') {do {suffixExpre.push(opStack.pop());} while (opStack[opStack.length - 1] != '(');opStack.pop();}else if (opStack.length == 0 || Priority(midExpre[i]) > Priority(opStack[opStack.length - 1])) { opStack.push(midExpre[i]);}else {do {suffixExpre.push(opStack.pop());} while (opStack.length > 0 && Priority(midExpre[i]) <= Priority(opStack[opStack.length - 1])); opStack.push(midExpre[i]);}}else {suffixExpre.push(midExpre[i]);}}while (opStack.length > 0) {suffixExpre.push(opStack.pop());}return suffixExpre;}function Priority(op) {var opPri = 0;switch (op) {case "+":opPri = 1;break;case "-":opPri = 1;break;case "*":opPri = 2;break;case "/":opPri = 2;break;}return opPri;}function suffixValue(suffixExpre) {var calStack = [];console.log(suffixExpre);for (var i = 0; i < suffixExpre.length; i++) {if (ops.indexOf(suffixExpre[i]) != -1) {var opRight = Number(calStack.pop());var opLeft = Number(calStack.pop());var tmpResult = 0;switch (suffixExpre[i]) {case '+':tmpResult = opLeft + opRight;break;case '-':tmpResult = opLeft - opRight;break;case '*':tmpResult = opLeft * opRight;break;case '/':tmpResult = opLeft / opRight;break;}calStack.push(tmpResult);}else {calStack.push(suffixExpre[i]);}console.log(calStack);}return calStack.pop();}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
JS实现简易计算器的7种⽅法先放图（好吧⽐较挫）⽅法⼀：最容易版<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title><style>body {background-color: #eee;}#calculator {margin: 100px 0 0 150px;}</style></head><body><!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" onclick="addHandler();" /><input type="button" value="-" onclick="subtractHandler();" /><input type="button" value="×" onclick="multiplyHandler();" /><input type="button" value="÷" onclick="divideHandler();" /></p></div><script>// 获取元素var calculator = document.querySelector('#calculator');var formerInput = calculator.querySelector('.formerInput');var laterInput = calculator.querySelector('.laterInput');var sign = calculator.querySelector('.sign');var resultOutput = calculator.querySelector('.resultOutput');// 加function addHandler() {sign.innerHTML = '+';resultOutput.innerHTML = +formerInput.value + +laterInput.value;}// 减function subtractHandler() {sign.innerHTML = '-';resultOutput.innerHTML = formerInput.value - laterInput.value;}// 乘function multiplyHandler() {sign.innerHTML = '×';resultOutput.innerHTML = formerInput.value * laterInput.value;}// 除function divideHandler() {sign.innerHTML = '÷';resultOutput.innerHTML = formerInput.value / laterInput.value;}</script></body></html>⽅法⼆：结构和⾏为分离<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title>#calculator {margin: 100px 0 0 150px;}</style></head><body><!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" onclick="addHandler();" /><input type="button" value="-" onclick="subtractHandler();" /><input type="button" value="×" onclick="multiplyHandler();" /><input type="button" value="÷" onclick="divideHandler();" /></p></div><script>// 获取元素var calculator = document.querySelector('#calculator');var formerInput = calculator.querySelector('.formerInput');var laterInput = calculator.querySelector('.laterInput');var sign = calculator.querySelector('.sign');var resultOutput = calculator.querySelector('.resultOutput');var btns = calculator.querySelectorAll('.btn');// 绑定事件// +btns[0].onclick = addHandler;// -btns[1].onclick = subtractHandler;// ×btns[2].onclick = multiplyHandler;// ÷btns[3].onclick = divideHandler;// 加function addHandler() {sign.innerHTML = '+';resultOutput.innerHTML = +formerInput.value + +laterInput.value; }// 减function subtractHandler() {sign.innerHTML = '-';resultOutput.innerHTML = formerInput.value - laterInput.value;}// 乘function multiplyHandler() {sign.innerHTML = '×';resultOutput.innerHTML = formerInput.value * laterInput.value;}// 除function divideHandler() {sign.innerHTML = '÷';resultOutput.innerHTML = formerInput.value / laterInput.value;}</script></body></html>⽅法三：循环绑定事件<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title><style>body {background-color: #eee;}#calculator {margin: 100px 0 0 150px;<!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" onclick="addHandler();" /><input type="button" value="-" onclick="subtractHandler();" /><input type="button" value="×" onclick="multiplyHandler();" /><input type="button" value="÷" onclick="divideHandler();" /></p></div><script>// 获取元素var calculator = document.querySelector('#calculator');var formerInput = calculator.querySelector('.formerInput');var laterInput = calculator.querySelector('.laterInput');var sign = calculator.querySelector('.sign');var resultOutput = calculator.querySelector('.resultOutput');var btns = calculator.querySelectorAll('.btn');// 绑定事件for (var i = 0; i < btns.length; i++) {btns[i].onclick = function () {switch (this.title) {case 'add':addHandler();break;case 'subtract':subtractHandler();break;case 'multiply':multiplyHandler();break;case 'divide':divideHandler();break;}};}// 加function addHandler() {sign.innerHTML = '+';resultOutput.innerHTML = +formerInput.value + +laterInput.value; }// 减function subtractHandler() {sign.innerHTML = '-';resultOutput.innerHTML = formerInput.value - laterInput.value;}// 乘function multiplyHandler() {sign.innerHTML = '×';resultOutput.innerHTML = formerInput.value * laterInput.value;}// 除function divideHandler() {sign.innerHTML = '÷';resultOutput.innerHTML = formerInput.value / laterInput.value;}</script></body></html>⽅法四：提取函数<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title><style>body {margin: 100px 0 0 150px;}</style></head><body><!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" class="btn" title="add" /><input type="button" value="-" class="btn" title="subtract" /> <input type="button" value="×" class="btn" title="multiply" /> <input type="button" value="÷" class="btn" title="divide" /> </p></div><script>// 获取元素var calculator = document.querySelector('#calculator');var formerInput = calculator.querySelector('.formerInput');var laterInput = calculator.querySelector('.laterInput');var sign = calculator.querySelector('.sign');var resultOutput = calculator.querySelector('.resultOutput');var btns = calculator.querySelectorAll('.btn');// 绑定事件each(btns, function (index, elem ) {elem.onclick = function () {switch (this.title) {case 'add':addHandler();break;case 'subtract':subtractHandler();break;case 'multiply':multiplyHandler();break;case 'divide':divideHandler();break;}};});// 遍历function each(array, fn) {for (var i = 0; i < array.length; i++) {fn(i, array[i]);}}// 更新符号function updateSign(symbol) {sign.innerHTML = symbol;}// 加法function add(num1, num2) {return +num1 + +num2;}// 减法function subtract(num1, num2) {return num1 - num2;}// 乘法function multiply(num1, num2) {return num1 * num2;}// 除法function divide(num1, num2) {return num1 / num2;}// 输出结果}// 加function addHandler() {// sign.innerHTML = '+';updateSign('+');outputResult(add(formerInput.value, laterInput.value));}// 减function subtractHandler() {updateSign('-');outputResult(subtract(formerInput.value, laterInput.value)); }// 乘function multiplyHandler() {updateSign('×');outputResult(multiply(formerInput.value, laterInput.value)); }// 除function divideHandler() {updateSign('÷');outputResult(divide(formerInput.value, laterInput.value)); }</script></body></html>⽅法五：管理代码(找到组织)<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title><style>body {background-color: #eee;}#calculator {margin: 100px 0 0 150px;}</style></head><body><!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" class="btn" title="add" /><input type="button" value="-" class="btn" title="subtract" /> <input type="button" value="×" class="btn" title="multiply" /> <input type="button" value="÷" class="btn" title="divide" /> </p></div><script>// 获取元素var wrapElem = document.querySelector('#calculator');var calculatorElem = {formerInput: wrapElem.querySelector('.formerInput'),laterInput: wrapElem.querySelector('.laterInput'),sign: wrapElem.querySelector('.sign'),resultOutput: wrapElem.querySelector('.resultOutput'), btns: wrapElem.querySelectorAll('.btn')};// 绑定事件each(calculatorElem.btns, function (index, elem ) {elem.onclick = function () {switch (this.title) {case 'add':addHandler();break;case 'subtract':multiplyHandler();break;case 'divide':divideHandler();break;}};});// 遍历function each(array, fn) {for (var i = 0; i < array.length; i++) {fn(i, array[i]);}}// 更新符号function updateSign(symbol) {calculatorElem.sign.innerHTML = symbol;}var operation = {add: function(num1, num2) {return +num1 + +num2;},subtract: function(num1, num2) {return num1 - num2;},multiply: function(num1, num2) {return num1 * num2;},divide: function(num1, num2) {return num1 / num2;}};// 输出结果function outputResult(result) {calculatorElem.resultOutput.innerHTML = result;}// 加function addHandler() {// sign.innerHTML = '+';updateSign('+');outputResult(operation.add(calculatorElem.formerInput.value, terInput.value));}// 减function subtractHandler() {updateSign('-');outputResult(operation.subtract(calculatorElem.formerInput.value, terInput.value)); }// 乘function multiplyHandler() {updateSign('×');outputResult(operation.multiply(calculatorElem.formerInput.value, terInput.value)); }// 除function divideHandler() {updateSign('÷');outputResult(operation.divide(calculatorElem.formerInput.value, terInput.value)); }</script></body></html>⽅法六：OCP开放--封闭原则<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title><style>body {background-color: #eee;}#calculator {margin: 100px 0 0 150px;}</style></head><!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" class="btn" title="add" /><input type="button" value="-" class="btn" title="subtract" /><input type="button" value="×" class="btn" title="multiply" /><input type="button" value="÷" class="btn" title="divide" /><input type="button" value="%" class="btn" title="mod" /><input type="button" value="^" class="btn" title="power" /><!-- <input type="button" value="1/x" class="btn" title="invert" /> --></p></div><script>// 获取元素var wrapElem = document.querySelector('#calculator');var calculatorElem = {formerInput: wrapElem.querySelector('.formerInput'),laterInput: wrapElem.querySelector('.laterInput'),sign: wrapElem.querySelector('.sign'),resultOutput: wrapElem.querySelector('.resultOutput'),btns: wrapElem.querySelectorAll('.btn')};// 绑定事件each(calculatorElem.btns, function (index, elem ) {elem.onclick = function () {updateSign(this.value);outputResult(operate(this.title, calculatorElem.formerInput.value, terInput.value)); };});// 遍历function each(array, fn) {for (var i = 0; i < array.length; i++) {fn(i, array[i]);}}// 更新符号function updateSign(symbol) {calculatorElem.sign.innerHTML = symbol;}// 运算function operate(name, num1, num2) {if (!operation[name]) throw new Error('不存在名为' + name + '的运算⽅法！');return operation[name](num1, num2);}var operation = {add: function(num1, num2) {return +num1 + +num2;},subtract: function(num1, num2) {return num1 - num2;},multiply: function(num1, num2) {return num1 * num2;},divide: function(num1, num2) {return num1 / num2;},addOperation: function (name, fn) {if (!this[name]) {this[name] = fn;}return this;}};operation.addOperation('mod', function (num1, num2) {return num1 % num2;}).addOperation('power', function (base, power) {return Math.pow(base, power);function outputResult(result) {calculatorElem.resultOutput.innerHTML = result;}</script></body></html>⽅法七：模块化<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title><style>body {background-color: #eee;}#calculator {margin: 100px 0 0 150px;}</style></head><body><!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" class="btn" title="add" /><input type="button" value="-" class="btn" title="subtract" /><input type="button" value="×" class="btn" title="multiply" /><input type="button" value="÷" class="btn" title="divide" /><input type="button" value="%" class="btn" title="mod" /><input type="button" value="^" class="btn" title="power" /><input type="button" value="1/x" class="btn" title="invert" /></p></div><script>(function () {// 获取元素var wrapElem = document.querySelector('#calculator');var calculatorElem = {formerInput: wrapElem.querySelector('.formerInput'),laterInput: wrapElem.querySelector('.laterInput'),sign: wrapElem.querySelector('.sign'),resultOutput: wrapElem.querySelector('.resultOutput'),btns: wrapElem.querySelectorAll('.btn')};// 绑定事件each(calculatorElem.btns, function (index, elem ) {elem.onclick = function () {updateSign(this.value);outputResult(operate(this.title, calculatorElem.formerInput.value, terInput.value)); };});// 遍历function each(array, fn) {for (var i = 0; i < array.length; i++) {fn(i, array[i]);}}// 更新符号function updateSign(symbol) {calculatorElem.sign.innerHTML = symbol;}// 运算var operate = (function () {subtract: function(num1, num2) {return num1 - num2;},multiply: function(num1, num2) {return num1 * num2;},divide: function(num1, num2) {return num1 / num2;},addOperation: function (name, fn) {if (!operation[name]) {operation[name] = fn;}return operation;}};function operate(name) {if (!operation[name]) throw new Error('不存在名为' + name + '的运算⽅法！');return operation[name].apply(operation, [].slice.call(arguments, 1, arguments.length)); }operate.addOperation = operation.addOperation;return operate;})();operate.addOperation('mod', function (num1, num2) {return num1 % num2;}).addOperation('power', function (base, power) {return Math.pow(base, power);}).addOperation('invert', function (num) {return 1 / num;});// 输出结果function outputResult(result) {calculatorElem.resultOutput.innerHTML = result;}})();</script></body></html>。
超级简易的JS计算器（实现加减乘除）<!DOCTYPE html><html><head><meta charset="UTF-8"><title>简单的计算器</title><style>body{margin: 0;}.tab{border: 3px solid black ;border-radius: 2px;border-collapse:collapse;width: 268px;height: 402px;margin: 100px auto;}.tr{height: 67px;width: 268px;border: 3px solid black ;text-align: right;}.tr1{width: 268px;height: 67px;border: 3px solid black ;text-align: center;}.tr2{width: 67px;height: 67px;border: 3px solid black ;text-align: center;}</style><script>var s1 = "";var s2 = "";var s3 = "";var s4 = "";var s5 = "";function view(val){var a = document.getElementById(val);s1 = a.innerHTML;if(s1=="+" || s1=="-" || s1=="*" || s1=="/"){s3 = s1;s1 = "";}if(s3=="+" || s3=="-" || s3=="*" || s3=="/"){add2(s1);}if(s3==""){add1(s1);}}function add1(s1){s2 = s2 + s1;show();}function add2(s1){s4 = s4 + s1;show();}function cal(){switch(s3){case "+":{s5 = (String)((parseFloat(s2)+parseFloat(s4)).toFixed(2));result.innerHTML = s5;break;}case "-":{s5 = (String)((parseFloat(s2)-parseFloat(s4)).toFixed(2));result.innerHTML = s5;break;}case "*":{s5 = (String)((parseFloat(s2)*parseFloat(s4)).toFixed(2));result.innerHTML = s5;break;}case "/":{s5 = (String)((parseFloat(s2)/parseFloat(s4)).toFixed(2));result.innerHTML = s5;break;}}}function show(){var result = document.getElementById("result");result.innerHTML = s2+s3+s4;}</script></head><body><table class="tab"><tr class = "tr2"><td colspan="4">简易计算器</td></tr><tr class="tr"><td id="result" colspan="4"></td></tr><tr ><td id="+" class="tr1" onclick="view('+')">+</td><td id="-" class="tr1" onclick="view('-')">-</td><td id="*" class="tr1" onclick="view('*')">*</td><td id="/" class="tr1" onclick="view('/')">/</td></tr><tr ><td id="7" class="tr1" onclick="view('7')">7</td><td id="8" class="tr1" onclick="view('8')">8</td><td id="9" class="tr1" onclick="view('9')">9</td><td id="0" class="tr1" onclick="view('0')">0</td></tr><tr><td id="4" class="tr1" onclick="view('4')">4</td><td id="5" class="tr1" onclick="view('5')">5</td><td id="6" class="tr1" onclick="view('6')">6</td><td id="." class="tr1" onclick="view('.')">.</td></tr><tr><td id="1" class="tr1" onclick="view('1')">1</td><td id="2" class="tr1" onclick="view('2')">2</td><td id="3" class="tr1" onclick="view('3')">3</td><td id="=" class="tr1" onclick="cal()">=</td></tr></table></body></html>对于这个程序来说，判断的顺序⾮常重要，不然就会把"+"号存在s2，s4中⽽不是s3中。
JS-简易计算器一、要求：在网页中编程实现一个简单的计算器，它能提供加减乘除四则运算，它支持IE浏览器。
二、实验原理（简单步骤）利用Java Applet图形界面首先开始设计一个计算器的界面，定义计算器所需要的按钮并赋给其按钮名称，使得使用计算器时简单明了，清晰可见，操作轻松。
给各个按钮进行算法，利用鼠标点击事件，当鼠标点击某个按钮时就开始执行那个按钮所定义的算法，生成数据并显示。
除数字的输入为直接进行输入外，其他运算例如+、-、*、/、开平方等算法要求计算时通过内部较为复杂的运算将结果显示在显示屏上。
三、程序界面四、界面编码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>简易计算器</title></head><body><table width="33%" height="193" border="1"><tr><td colspan="4"><input type="text" size="50" name="result" id="result"></td> </tr><tr><td width="24%"><input type="button" value=" 1 " onclick="getNum(1)"></td><td width="23%"><input type="button" value=" 2 " onclick="getNum(2)"></td><td width="26%"><input type="button" value=" 3 " onclick="getNum(3)"></td><td width="27%"><input type="button" value=" + " onclick="getNum('+')"></td></tr><tr><td><input type="button" value=" 4 " onclick="getNum(4)"></td><td><input type="button" value=" 5 " onclick="getNum(5)"></td><td><input type="button" value=" 6 " onclick="getNum(6)"></td><td><input type="button" value=" - " onclick="getNum('-')"></td></tr><tr><td><input type="button" value=" 7 " onclick="getNum(7)"></td><td><input type="button" value=" 8 " onclick="getNum(8)"></td><td><input type="button" value=" 9 " onclick="getNum(9)"></td><td><input type="button" value=" * " onclick="getNum('*')"></td></tr><tr><td><input type="button" value=" 0 " onclick="getNum(0)"></td><td><input type="button" value=" . " onclick="getNum('.')"></td><td><input type="button" value=" = " onclick="getResult()"></td><td><input type="button" value=" / " onclick="getNum('/')"></td></tr></table><script type="text/javascript" language="javascript">//判断是否清空var clearContent=false;//获得数字function getNum(num){if(clearContent){//如果已经有结果存在则将其清空document.getElementById("result").value="";clearContent=false;}//获取结果对象var objresult=document.getElementById("result");//实现数字连接objresult.value+=num;}//获取结果对象值function getResult(){var objresult2=document.getElementById("result");//为结果赋值objresult2.value=objresult2.value+"="+eval(objresult2.value);clearContent=true;}</script></body></html>（注：素材和资料部分来自网络，供参考。
javascript应用实例JavaScript应用实例：制作一个简单的计算器JavaScript是一种广泛应用于网页开发的脚本语言，它可以为网页添加动态效果和交互性。
在本文中，我们将介绍如何使用JavaScript 制作一个简单的计算器。
我们需要在HTML文件中创建一个表单，其中包含数字和运算符按钮以及一个显示结果的文本框。
代码如下：```<form><input type="text" id="result" readonly><br><input type="button" value="1" onclick="addNumber(1)"><input type="button" value="2" onclick="addNumber(2)"><input type="button" value="3" onclick="addNumber(3)"><input type="button" value="+" onclick="addOperator('+')"><br><input type="button" value="4" onclick="addNumber(4)"><input type="button" value="5" onclick="addNumber(5)"><input type="button" value="6" onclick="addNumber(6)"><input type="button" value="-" onclick="addOperator('-')"><br><input type="button" value="7" onclick="addNumber(7)"><input type="button" value="8" onclick="addNumber(8)"><input type="button" value="9" onclick="addNumber(9)"><input type="button" value="*" onclick="addOperator('*')"><br><input type="button" value="0" onclick="addNumber(0)"><input type="button" value="C" onclick="clearResult()"><input type="button" value="=" onclick="calculate()"><input type="button" value="/" onclick="addOperator('/')"></form>```在这个表单中，我们使用了四个数字按钮、四个运算符按钮和一个清除按钮。
js中简单计算器的代码JS中实现一个简单的计算器并不困难，我们只需利用基本的数学运算符和JavaScript的语法即可。
下面是一个实现加、减、乘、除四则运算的计算器的JavaScript代码示例：```javascript// 获取计算器的元素var calculator = document.getElementById('calculator'); // 获取数字、运算符和结果显示区域的元素var num1 = document.getElementById('num1');var num2 = document.getElementById('num2');var operator = document.getElementById('operator');var result = document.getElementById('result');// 给运算符按钮添加事件处理函数var addButton = document.getElementById('add');addButton.addEventListener('click', function() {var n1 = parseFloat(num1.value);var n2 = parseFloat(num2.value);result.innerHTML = n1 + n2;});var subtractButton =document.getElementById('subtract');subtractButton.addEventListener('click', function() {var n1 = parseFloat(num1.value);var n2 = parseFloat(num2.value);result.innerHTML = n1 - n2;});var multiplyButton =document.getElementById('multiply');multiplyButton.addEventListener('click', function() { var n1 = parseFloat(num1.value);var n2 = parseFloat(num2.value);result.innerHTML = n1 * n2;});var divideButton = document.getElementById('divide'); divideButton.addEventListener('click', function() {var n1 = parseFloat(num1.value);var n2 = parseFloat(num2.value);result.innerHTML = n1 / n2;});```在以上代码中，我们定义了四个函数来处理加、减、乘、除四则运算。
js中简单计算器的代码在JavaScript中，我们可以使用简单的语法来编写一个基本的计算器。
计算器可以执行加法、减法、乘法和除法等数学运算操作。
为了编写这个计算器程序，我们需要创建三个主要的函数，分别是获取输入、执行计算和输出结果。
首先定义一个由用户输入的数字和运算符组成的表达式，然后解析表达式，并在最终屏幕上显示计算结果。
下面是一个简单的计算器程序示例，可以执行加法、减法、乘法和除法四种基本运算：```jsfunction getInputValue() {var x = parseFloat(document.getElementById("input1").value); var y = parseFloat(document.getElementById("input2").value); var op = document.getElementById("operator").value;return [x, y, op];}function calculate() {var result;var [x,y,op] = getInputValue();if (op === "+") {result = x + y;} else if (op === "-") {result = x - y;} else if (op === "*") {result = x * y;} else if (op === "/") {result = x / y;}return result;}function displayResult() {var result = calculate();document.getElementById("result").innerHTML = result;}```这个计算器程序中，`getInputValue()`函数获取用户输入的数值和运算符，`calculate()`函数执行数学运算并返回计算结果，`displayResult()`函数将结果输出到屏幕上。
24点计算器的Javascript实现前段时间⼩舅⼦（⼩学⽣）过来玩，没事⼀起玩3*8=24，遇到难算的半天都想不出来，所以就想有没有app或者⼩⼯具啥的，搜了⼀下，有⼯具，但是不好⽤，所以就想⾃⼰写个简单易⽤的。
开始着⼿做的时候，发现运算逻辑⽆法总结成简单的计算公式，百度也没找到有⼈完整的实现，最后只能⽤最笨的⽅法了，且听我娓娓道来。
⾸先，按照常规，共有四个正整数参与运算，取值区间均为 [1,10]（包含1和10），仅有加减乘除以及括号运算，不存在其他⾼级运算（如平⽅、开⽅等等），这四个数的计算顺序不确定，每个数字参与且仅参与⼀次运算。
按数学的思路来对这个常规描述进⾏解析，如下：四个数 a、b、c、d ；取值范围 1<=a<=10，1<=b<=10，1<=c<=10，1<=d<=10;运算⽅式：+、 -、 *、 / 以及 () ；运算顺序不确定，所以我们暂时认为 a+b 、 b+a 、(a+b) 与 (b+a)，a*b 、 b*a 、(a*b) 与(b*a) 等等均互为不相同的计算(⾄于把他们认为是相同的计算，还需要更深⼊的研究了，这⾥的愚笨算法暂时⽆法区分)。
我们先确定四个空位（美其名⽈ A、B、C、D），在计算的时候往这四个空位⾥填上这四个数字，如果按照我下⾯描述的计算⽅式最终得到24 ，那么我们就认为这种数字与计算的组合就是⼀种"3*8=24"的计算⽅法，否则，我们继续遍历。
我仔细思考了⼀下，这四个空位的结合顺序⼀共有 5 种：1、{[(A,B)C]D}2、{[A(B,C)]D}3、{A[(B,C)D]}4、{A[B(C,D)]}5、[(A,B),(C,D)]有了这些结合顺序之后，我们只需要把我们的四个数字分别放到这四个空位中，并且在这四个空位之间分别放上四种计算⽅式(+、 -、 *、 /)中的⼀种，然后根据这个组合计算出结果，并判断是否等于24，如果是，那么就找到了⼀种，否则继续往下执⾏。
Vue.js实现的计算器功能完整⽰例这篇⽂章主要介绍了Vue.js实现的计算器功能,结合完整实例形式分析了vue.js响应⿏标事件实现基本的数值运算相关操作技巧,可实现四则运算及乘⽅、开⽅等功能,需要的朋友可以参考下，本⽂实例讲述了Vue.js实现的计算器功能。
分享给⼤家供⼤家参考，具体如下：1. HTML部分代码<!DOCTYPE html><html lang="en"><head><link rel="stylesheet"type="text/css"href="css/css.css"rel="external nofollow"><script type="text/javascript"src=""></script><meta charset="UTF-8"><title>my-calculator</title></head><body><div id="calculator"><!--显⽰框--><input-box v-bind:input-show="inputShow"></input-box><btn-list><div @click="clearValue()"class=" btn-30 btn-radius color-red clear-marginleft">C</div><div class=" btn-30 btn-radius color-blue">+/-</div><div @click="inputValue('%')"class=" btn-30 btn-radius color-blue">%</div><div @click="backValue()"class=" btn-70 btn-radius color-red font-14">←</div><div @click="inputValue('7')"class=" btn-30 btn-radius clear-marginleft">7</div><div @click="inputValue('8')"class=" btn-30 btn-radius">8</div><div @click="inputValue('9')"class=" btn-30 btn-radius">9</div><div @click="squareValue()"class=" btn-30 btn-radius color-blue font-14">ײ</div><div @click="radicalValue()"class=" btn-30 btn-radius color-blue font-12">√</div><div @click="inputValue('4')"class=" btn-30 btn-radius clear-marginleft">4</div><div @click="inputValue('5')"class=" btn-30 btn-radius">5</div><div @click="inputValue('6')"class=" btn-30 btn-radius">6</div><div @click="inputValue('×')"class=" btn-30 btn-radius color-blue font-14">×</div><div @click="inputValue('÷')"class=" btn-30 btn-radius color-blue font-12">÷</div><div @click="inputValue('1')"class=" btn-30 btn-radius clear-marginleft">1</div><div @click="inputValue('2')"class=" btn-30 btn-radius">2</div><div @click="inputValue('3')"class=" btn-30 btn-radius">3</div><div @click="inputValue('+')"class=" btn-30 btn-radius color-blue font-14">+</div><div @click="inputValue('-')"class=" btn-30 btn-radius color-blue font-14">-</div><div @click="inputValue('0')"class=" btn-70 btn-radius clear-marginleft">0</div><div @click="inputValue('.')"class=" btn-30 btn-radius">.</div><div @click="calValue()"class=" btn-70 btn-radius color-red font-14">=</div></btn-list></div><script>var calculator = new Vue({el:'#calculator',data:{inputShow:{value:'0'}},components:{'input-box':{props:['inputShow'],computed: {value:function() {return this.inputShow.value}},template:'<input id="input-box" type="text" size="21" maxlength="21" v-model="value" readonly="readonly">'},'btn-list':{template:'<div id="btn-list"><slot></slot></div>'}},methods:{inputValue(param){if(Object.prototype.toString.call(this.inputShow.value) == "[object Number]"){ //判断输⼊框内容是否为数字类型this.inputShow.value = "0"; //数字类型说明是上个计算结果,清空内容}var str =''+ this.inputShow.value; //输⼊内容时,将输⼊框内容转为字符串类型var len = str.length;var arr = ["+","-","×","÷"];var num = (''+parseFloat(str.split('').reverse().join(''))).split('').reverse().join(''); //parseInt(str.split('').reverse().join('')))是获取输⼊框内最后⼀串数字,再反转回来 ,num为输⼊框内最后⼀串数字var nlen = num.length;if((num!= '0'&& param != '.')|| (param == '.'&& num.indexOf(".")==-1)){ //输⼊框内最后⼀串数字不为0时拼接字符串if(arr.indexOf(str.charAt(len-1)) != -1 && arr.indexOf(param) != -1){ //若⼀开始输⼊内容为运算符,输⼊⽆效return;}this.inputShow.value += param; //拼接输⼊内容}else{arr.push("%");if(param == '.'){ //若num中已有⼩数点,输⼊内容为⼩数点,视为⽆效return;}else if(!(arr.indexOf(param) != -1)){ //判断输⼊框内最后⼀个字符不为运算符this.inputShow.value =str.substring(0,str.length-nlen) + param; //输⼊框内最后⼀串数字为0时,删除0拼接}}},clearValue(){ //清空输⼊框内容this.inputShow.value = '0';},calValue(){ //计算结果var str = this.inputShow.value;str = str.replace('×','*').replace('÷','/').replace('%','*0.01'); //替换运算符try{this.inputShow.value = eval(str); //若⽤户输⼊内容不符合运算规则,不计算}catch(error){return;}},squareValue(){ //平⽅计算var str = this.inputShow.value;this.inputShow.value = Math.pow(eval(str),2)},radicalValue(){ //开根号计算var str = this.inputShow.value;this.inputShow.value = Math.sqrt(eval(str));},backValue(){ //删除键,删除单个字符var str = this.inputShow.value;if(str.length == 1){this.inputShow.value = "0";}else{this.inputShow.value = str.slice(0,str.length-1);}},/*oppositeValue(){ //正负号取值var str = this.inputShow.value;var num = (''+parseInt(str.split('').reverse().join(''))).split('').reverse().join(''); //获取输⼊框内最后遗传数字var nlen = num.length;debugger;if(!isNaN( parseInt(str.charAt(str.length-1))) && num != 0){ //当输⼊框末位字符为数字且最后⼀串数字不为0时,取正负this.inputShow.value = str.substring(0,str.length-nlen)+`(-${num})`;}}*/}})</script></body></html>2. CSS部分代码@charset "utf-8";body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input { margin: 0; padding: 0; -webkit-text-size-adjust: none}h1, h2, h3, h4, h5, h6 { font-size: 12px; font-weight: normal}body>div { margin: 0 auto}div { text-align: left}a img { border: 0}body { color: #333; text-align: center; font: 12px "微软雅⿊";}ul, ol, li { list-style-type: none; vertical-align: 0}a { outline-style: none; color: #535353; text-decoration: none}a:hover { color: #D40000; text-decoration: none}.clear { height: 0; overflow: hidden; clear: both}/* calculator */#calculator { width: 200px; height: 245px; padding: 10px; border: 1px solid #e5e5e5; background: #f8f8f8; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; box-shadow: 0px 0px 10px #f2f2f2; -moz-box-shadow: 0px 0px 10px #f2f2f2; -webkit-box-shadow: 0px 0px 10px #f2f2f2; margin: 40px auto 0 auto;}#calculator #input-box { margin: 0; width: 187px; padding: 9px 5px; height: 14px; border: 1px solid #e5e5e5; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background: #FFF; text-align: right; line-height: 14px; font-size: 12px; font-family: Verdana, Geneva, sans-serif; color: #666; outline: none; text-transform: uppercase;}#calculator #btn-list { width: 200px; overflow: hidden;}#calculator #btn-list .btn-radius { border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border: 1px solid #e5e5e5; background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#ebebeb)); background: -moz-linear-gradient(top, #f7f7f7,#ebebeb); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f7f7f7,endColorstr=#ebebeb,grandientType=1); line-height: 29px; text-align: center; text-shadow: 0px 1px 1px #FFF; font-weight: bold; font-family: Verdana, Geneva, sans-serif; color: #666; float: left; margin-left: 11px; margin-top: 11px; font-size: 12px; cursor: pointer;}#calculator #btn-list .btn-radius:active { background: #ffffff;}#calculator #btn-list .clear-marginleft { margin-left: 0;}#calculator #btn-list .font-14 { font-size: 14px;}#calculator #btn-list .color-red { color: #ff5050}#calculator #btn-list .color-blue { color: #00b4ff}#calculator #btn-list .btn-30 { width: 29px; height: 29px;}#calculator #btn-list .btn-70 { width: 70px; height: 29px;}3. 使⽤本站HTML/CSS/JS在线运⾏测试⼯具：，可得到如下测试运⾏效果：4. 使⽤时记得改下css路径,在html中引⼊vue5. 博主技术有限,正负号部分功能还有问题待完善.计算器还有⼀些未知的⼩Bug,感兴趣的读者可以在这个基础上进⾏扩展。
