JavaScript编写的简易计算器

合集下载

JavaScript实现简单网页版计算器

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();}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

VB简易计算器代码

VB简易计算器代码下面是一个简单的VB计算器代码，用于执行基本的加、减、乘、除运算。

```vbOption Strict OnPublic Class CalculatorPrivate Sub btnAdd_Click(sender As Object, e As EventArgs) Handles btnAdd.ClickDim num1 As Double = CDbl(txtNum1.Text)Dim num2 As Double = CDbl(txtNum2.Text)Dim result As Double = num1 + num2txtResult.Text = result.ToStringEnd SubPrivate Sub btnSubtract_Click(sender As Object, e As EventArgs) Handles btnSubtract.ClickDim num1 As Double = CDbl(txtNum1.Text)Dim num2 As Double = CDbl(txtNum2.Text)Dim result As Double = num1 - num2txtResult.Text = result.ToStringPrivate Sub btnMultiply_Click(sender As Object, e As EventArgs) Handles btnMultiply.ClickDim num1 As Double = CDbl(txtNum1.Text)Dim num2 As Double = CDbl(txtNum2.Text)Dim result As Double = num1 * num2txtResult.Text = result.ToStringEnd SubPrivate Sub btnDivide_Click(sender As Object, e As EventArgs) Handles btnDivide.ClickDim num1 As Double = CDbl(txtNum1.Text)Dim num2 As Double = CDbl(txtNum2.Text)If num2 = 0 ThenMessageBox.Show("除数不能为0！", "错误", MessageBoxButtons.OK, MessageBoxIcon.Error)ElseDim result As Double = num1 / num2txtResult.Text = result.ToStringEnd IfEnd Sub```此代码创建了一个简单的窗体应用程序，其中包含两个文本框用于输入两个数字，四个按钮用于执行不同的计算操作，以及一个文本框用于显示结果。

用java代码写的简易计算器（可以实现基本的加减乘除功能）

⽤java代码写的简易计算器（可以实现基本的加减乘除功能）package A;import java.awt.*;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import java.awt.event.MouseEvent;import java.awt.event.MouseListener;import javax.swing.*;public class Calcular3 extends JFrame implements ActionListener,MouseListener{private int m1=0,n=0;//private double m2=0;//运算的数private int flag=0;JFrame f;JPanel p1,p2,p3;JTextField t;JButton b1[]=new JButton[18];String b[]= {"1","2","3","4","5","6","7","8","9","0","清空","退格",".","=","+","-","*","/"};public Calcular3(){f=new JFrame("计算器");t=new JTextField(35);p1=new JPanel();p2=new JPanel();p3=new JPanel();f.setBounds(100, 100, 400, 200);f.add(p1,BorderLayout.NORTH);f.add(p2,BorderLayout.CENTER);f.add(p3,BorderLayout.EAST);p2.setLayout(new GridLayout(5,3));p3.setLayout(new GridLayout(4,1));p1.add(t);for(int i=0;i<14;i++) {b1[i]=new JButton(b[i]);p2.add(b1[i]);b1[i].addActionListener(this);}for(int i=14;i<18;i++) {b1[i]=new JButton(b[i]);p3.add(b1[i]);b1[i].addActionListener(this);}/*for(int i=0;i<18;i++) {b1[i].addActionListener(this);}*/f.setVisible(true);}//实现接⼝的⽅法public void mouseClicked(MouseEvent e) {}public void mousePressed(MouseEvent e) {}public void mouseReleased(MouseEvent e) {}public void mouseEntered(MouseEvent e) {}public void mouseExited(MouseEvent e) {}public void actionPerformed(ActionEvent e) {String str="";int i;for(i=0;i<=9;i++) {if(e.getSource()==b1[i]) {if(i==9) {n=n*10;}else {n=n*10+i+1;}str=String.valueOf(n);//整形n转换成字符串strt.setText(str);//显⽰到⽂本框上}}for(i=14;i<18;i++) {//+、-、*、/if(e.getSource()==b1[i]) {//匹配运算符m1=Integer.parseInt(t.getText());if(flag==15) {m2=m1+m2;}else if(flag==16) {m2=m1-m2;}else if(flag==17) {m2=m1*m2;}else if(flag==18) {m2=m1/m2;}else m2=m1;//若⽆连续的运算符运算，保存当前数据到m2 if(i==14) flag=15;else if(i==15) flag=16;else if(i==16) flag=17;else flag=18;str=String.valueOf(b[i]);t.setText(str);//显⽰到⽂本框上n=0;//还原，记录下次数据break;//找到匹配数据退出循环}}if(e.getSource()==b1[13]) {//=m1=Integer.parseInt(t.getText());if(flag==15) {m2=m2+m1;}else if(flag==16) {m2=m2-m1;}else if(flag==17) {m2=m2*m1;}else if(flag==18) {m2=m2/m1;}else m2=m1;str=String.valueOf(m2);t.setText(str);//显⽰到⽂本框上n=0;//还原，记录下次数据flag=0;//flag还原0，表明没有未处理的运算符}if(e.getSource()==b1[10]) {//各变量变为0 清空m1=0;m2=0;flag=0;n=0;t.setText("0");//显⽰到⽂本框上}if(e.getSource()==b1[11]) {//退格m1=(int)(Double.parseDouble(t.getText())/10);n=m1;str=String.valueOf(m1);t.setText(str);}if(e.getSource()==b1[12]) {//⼩数点m1=Integer.parseInt(t.getText());str=String.valueOf(m1+b[12]);t.setText(str);//显⽰到⽂本框上int j=0;for(i=0;i<=9;i++) {if(e.getSource()==b1[i]) {j++;m2=Math.pow(0.1, j)*Integer.parseInt(b[i]);str=String.valueOf(m1+m2);t.setText(str);//显⽰到⽂本框上}}}}//主函数public static void main(String[] args) {new Calcular3();}}。

JS实现简易计算器的7种方法

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" /></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>。

简易计算器代码

connect(button[9],SIGNAL(clicked()),this,SLOT(setOper()));
button[10] = new QPushButton(buttontext[10],this,buttontext[10]); // “—”
button[10]->setFixedSize(BUTTONWIDTH,BUTTONHEIGHT);
edit->setText(tr("%1").arg(0)); //这个函数可获取文本编辑框中光标的位置，并显示在状态栏中
//setText(tr(“%1行%2列”).arg(rowNum).arg(colNum));
initialize(); //调用初始化函数
}
void CWidget::initialize()
cwidget.cpp
#include "cwidget.h"
#define KEY_CLR "CLR"
#define KEY_ADD "+"
#define KEY_SUB "-"
#define KEY_MUL "*"
#define KEY_DIV "/"
#define KEY_EQ "="
#define KEY_0 "0"
{
delete edit;
delete *button;
delete mainLayout;
delete topLayout;
delete bottomLayout;
}
void CWidget::calculate() //响应按键“=”，调用计算功能

javascript应用实例

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>```在这个表单中，我们使用了四个数字按钮、四个运算符按钮和一个清除按钮。

javascript计算器报告附源代码

数学与计算机学院实验报告用javascript制作计算器5的阶乘的结果：源代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><title> 计算器</title><script type="text/jabascript">var x;var y;var num;var flag;function chushihua(){x="start";y="start";num=0;flag=false;}function qingkong(){jisuan.input.value="0";x="start";y="start";}function addNum(i){if(flag==true)//是运算符{jisuan.input.value=i;flag=false;}else{if(jisuan.input.value=="0"){jisuan.input.value=i;}elsejisuan.input.value+=i;//不是第一个数}}function caozuo(x){flag=true;if(y=="start"){num=jisuan.input.value;y=x;}else{count();y=x;}}function count(){if(y!="start"){switch(y){case "+":num=parseFloat(num)+parseFloat(jisuan.input.value);break;case "-": num=parseFloat(num)-parseFloat(jisuan.input.value);break;case "*":num=parseFloat(num)*parseFloat(jisuan.input.value);break;case "/":num=parseFloat(num)/parseFloat(jisuan.input.value);break;}jisuan.input.value=num;flag=true;}flag="false";}function hanshu(fun){switch(fun){case "sin":jisuan.input.value=Math.sin(jisuan.input.value);break;case "cos":jisuan.input.value=Math.cos(jisuan.input.value);break;case "tan":jisuan.input.value=Math.tan(jisuan.input.value);break;case "asin":jisuan.input.value=Math.asin(jisuan.input.value);break;case "acos":jisuan.input.value=Math.acos(jisuan.input.value);break;case "atan":jisuan.input.value=Math.atan(jisuan.input.value);break;case "log":jisuan.input.value=Math.log(jisuan.input.value);break;case "ln":jisuan.input.value=Math.ln(jisuan.input.value);break;case "sqrt":jisuan.input.value=Math.sqrt(jisuan.input.value);break;case "1/x":jisuan.input.value=1/jisuan.input.value;break;case "%":jisuan.input.value=jisuan.input.value*0.01;break;}}function jiecheng(i){var num =jisuan.input.value;var sum = 1;for(var i = 1; i <= num; i++){sum *= i;}jisuan.input.value=sum;}function tuige(){jisuan.input.value = jisuan.input.value.substring(0,jisuan.input.value.length-1)jisuan.input.title = jisuan.input.value.substring(jisuan.input.title.length-1) }</script><style type="text/css">#按钮{width:55px;height:35px;color:blue;font-size:18px;}</style></head><body onload="chushihua()"><script src="6.js" language="javascript"></script><form name="jisuan"><table border="1" cellspacing=6 ><tr><td colspan="5" align=center><input type="text" size="43" value="0" name="input" style="height:25px;color:blue;font-weight:bold"</td></tr><tr><td><input type="button" value="7" onclick="addNum(7)" id=按钮></td><td><input type="button" value="8" onclick="addNum(8)" id=按钮></td><td><input type="button" value="9" onclick="addNum(9)" id=按钮></td><td><input type="button" value="退格" onclick="tuige()" id=按钮></td><td><input type="button" value="清空" onclick="qingkong()" id=按钮></td></tr><tr><td><input type="button" value="4" onclick="addNum(4)" id=按钮></td><td><input type="button" value="5" onclick="addNum(5)" id=按钮></td><td><input type="button" value="6" onclick="addNum(6)" id=按钮></td><td><input type="button" value="PI" onclick="jisuan.input.value=Math.PI" id=按钮></td><td><input type="button" value="E" onclick="jisuan.input.value=Math.E" id=按钮></td></tr><tr><td><input type="button" value="1" onclick="addNum(1)" id=按钮></td><td><input type="button" value="2" onclick="addNum(2)" id=按钮></td><td><input type="button" value="3" onclick="addNum(3)" id=按钮></td><td><input type="button" value="+" onclick="caozuo('+')" id=按钮></td><td><input type="button" value="-" onclick="caozuo('-')" id=按钮></td></tr><tr><td><input type="button" value="0" onclick="addNum('0')" id=按钮></td><td><input type="button" value="·" onclick="addNum('.')" id=按钮></td><td><input type="button" value="n!" onclick="jiecheng()" id=按钮></td><td><input type="button" value="*" onclick="caozuo('*')" id=按钮></td><td><input type="button" value="/" onclick="caozuo('/')" id=按钮></td></tr><tr><td><input type="button" value="sin" onclick="hanshu('sin')" id=按钮></td><td><input type="button" value="cos" onclick="hanshu('cos')" id=按钮></td><td><input type="button" value="tan" onclick="hanshu('tan')" id=按钮></td><td><input type="button" value="(" onclick="caozuo('(')" id=按钮></td><td><input type="button" value=")" onclick="caozuo(')')" id=按钮></td></tr><tr><td><input type="button" value="asin" onclick="hanshu('asin')" id=按钮></td><td><input type="button" value="acos" onclick="hanshu('acos')" id=按钮></td><td><input type="button" value="atan" onclick="hanshu('atan')" id=按钮></td><td><input type="button" value="1/x" onclick="hanshu('1/x')"id=按钮></td><td><input type="button" value="%" onclick="hanshu('%')" id=按钮></td></tr><tr><td><input type="button" value="log" onclick="hanshu('log')" id=按钮></td><td><input type="button" value="ln" onclick="hanshu('ln')" id=按钮></td><td><input type="button" value="sqrt" onclick="hanshu('sqrt')" id=按钮></td><td colspan="2"><input type="button" value="=" onclick="caozuo('=')"style="width:120px;height:35px;"></td></tr></table></form></body></html>五、总结在我刚开始用JavaScript写程序的时候，感觉很不习惯，因为它以前学习的C语言有些相似，但具体又不一样，语法要求不是那么严格。

简易计算器小程序使用微信小程序开发工具和JavaScript开发

简易计算器小程序使用微信小程序开发工具和JavaScript开发微信小程序是一种基于微信平台的轻量级应用程序，可以在微信中使用。

它具有开发简便、使用方便、功能丰富等特点，在各行各业都得到了广泛的应用。

本文将介绍如何使用微信小程序开发工具和JavaScript开发一个简易计算器小程序。

一、准备工作在开始开发之前，我们需要准备一些基本的工具和环境。

首先，下载并安装微信小程序开发工具，该工具提供了一个可视化的界面，方便我们进行小程序的开发和调试。

其次，我们需要熟悉JavaScript语言的基本语法和特性，因为小程序的逻辑部分主要使用JavaScript来实现。

二、创建小程序项目打开微信小程序开发工具，点击新建项目，填写项目名称、项目目录和AppID等信息。

点击确定后，工具会自动生成一个基本的小程序项目结构。

三、编写界面在小程序项目的根目录下，找到和页面相关的文件夹。

新建一个名为"calculator"的文件夹，用于存放计算器页面的相关文件。

在该文件夹下新建三个文件：calculator.wxml、calculator.wxss、calculator.js，分别用于编写页面的结构、样式和逻辑。

在calculator.wxml文件中，我们可以使用一些基本的标签来构建计算器的界面，例如view、text、button等。

使用这些标签，我们可以创建一个包含数字键盘和运算符键的界面。

在calculator.wxss文件中，我们可以设置各个标签的样式，使界面看起来更加美观。

可以设置按钮的背景色、边框样式等。

四、编写逻辑在calculator.js文件中，我们需要编写计算器的逻辑代码。

首先，我们需要定义一些变量来保存计算器的状态。

比如，一个变量用于保存用户输入的表达式，一个变量用于保存计算结果等。

然后，我们可以通过监听用户的点击事件来获取用户输入的数字和运算符，并更新表达式变量的值。

接下来，我们需要编写一个计算函数，用于根据用户输入的表达式计算结果。

js中简单计算器的代码

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中简单计算器的代码

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()`函数将结果输出到屏幕上。

利用Javascript实现BMI计算器

利⽤Javascript实现BMI计算器前⾔BMI指数(英⽂为Body Mass Index)，是⽬前国际上常⽤的衡量⼈体胖瘦程度以及是否健康的⼀个标准，当我们需要⽐较及分析⼀个⼈的体重对于不同⾼度的⼈所带来的健康影响时，BMI值是⼀个中⽴⽽可靠的指标。

本⽂将介绍如何⽤JavaScript实现这个计算器，下⾯⼀起看看。

话不多说，直接上代码<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>BMI计算器</title></head><head><script>var BMI={};BMI.getBMI=function(a,b){var bmi=b/((a/100)*(a/100));return bmi;};BMI.idealweight=function(a){var x=(a-100)*0.9;return x;};function Cal(form){var a=eval(form.height.value);var b=eval(form.weight.value);var bmi=eval(form.BMI.value);var bmiValue =BMI.getBMI(a,b);BMI.disp_alert(bmiValue );form.IW.value=BMI.idealweight(a);form.BMI.value= bmiValue ;}BMI.disp_alert = function(bmi){if (bmi < 18.5){alert("你的体重太轻,要多吃点哟!");}else if (bmi >= 18.5 && bmi < 25){alert("亲,你的体重正常,要继续保持哟!");}else if (bmi >= 25 && bmi< 30){alert("亲,您的体重过重,要减肥了!");}else{alert("亲,你确实要减肥了!");}}</script></head><body><form method=post>你的⾝⾼(cm):<input type="text" name="height"><br><br/>你的体重(kg):<input type="text" name="weight"><br><br/><input type="button" value="开始计算" onclick="Cal(this.form)"><br/><br/>你的理想体重:<input type="text" name="IW"><br/><br/>您的BMI:<input type="text" name="BMI"></form></body></html>总结以上就是⽤Javascript实现BMI计算器的全部内容，很简单吧，感兴趣的朋友可以⾃⼰动⼿实践起来哦，希望对⼤家使⽤JavaScript能有所帮助。

html+js实现简单的计算器代码（加减乘除）

html+js实现简单的计算器代码（加减乘除）html+js实现简单的计算器代码(加减乘除)<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title></head><body><table><tr><td><input type="button" value="add" onclick="setOp('+', 'add');"/></td><td><input type="button" value="miner" onclick="setOp('-', 'miner');"/></td><td><input type="button" value="times" onclick="setOp('*', 'times');"/></td><td><input type="button" value="divide" onclick="setOp('/', 'divide');"/></td></tr></table><table id="tb_calc" style="display:none;"><tr><td> <input id="x" type="text" style="width:100px" value="" name="x" /></td><td> <lable id="op" name="op"></lable> </td><td> <input id="y" type="text" style="width:100px" value="" name="y" /> </td><td> <input id="opTips" type="button" value="" onclick="calc();"/> </td><td> <lable id="z" name="z"></lable> </td></tr></table><script type="application/javascript">function setOp(op, opTips){var tb=document.getElementById("tb_calc");tb.style.display = "none";document.getElementById("x").value = "";document.getElementById("y").value = "";document.getElementById("z").innerText = "";document.getElementById("op").innerText = op;document.getElementById("opTips").value = opTips;tb.style.display = "block";}function calc(){var x = parseInt(document.getElementById("x").value);var y = parseInt(document.getElementById("y").value);var op = document.getElementById("op").innerText;var z = "";switch(op){case '+':z = x + y;break;case '-':z = x - y;break;case '*': ;z = x * y;break;case '/': ;z = x / y;break;default:z = '';}console.log(x, op, y, '=', z);document.getElementById("z").innerText = z;}</script></body></html>截图如下：以上这篇html+js实现简单的计算器代码(加减乘除)就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

JavaScript实现计算器的四则运算功能

JavaScript实现计算器的四则运算功能⽬录⼀、需求 + 最终实现1. 需求2. 说明：利⽤了字符串（split、replace）和数组（splice）的⽅法。

3. 代码实现⼆、实现步骤1. 版本⼀：实现基础加减乘除2. 版本⼆：实现⾼位数的运算3. ⽀持多次的运算三、思考后端思维前端思维结束⼀、需求 + 最终实现注：只是前端实现1. 需求需求来源是因为有⼀个做嵌⼊式 C/C++的基友做了⼀个远程计算器。

需求是要求⽀持输⼊⼀个四则混合运算公式的字符串，返回计算后的结果。

想看看⽤ C/C++封装过的 JavaScript 如果要实现这样⼀个功能最终效果（⽂章后我会讨论这两种实现思路，还望各位看官可以提出⼀些优化⽅案以及建议之类的~）。

2. 说明：利⽤了字符串（split、replace）和数组（splice）的⽅法。

主要是⽤到字符串切分为数组的⽅法 split、以及数组中插⼊删除的⽅法 splice。

字符串正则 replace ⽅法是考虑到⽤户的输⼊习惯可能有所不同，例如 1+2*3/4与 3 * 7 + 229。

⽀持：基础四则运算 3+6*5/6-3;⼩数四则运算 3.14 + 6 * 5 / 6 - 3.5;⾼位四则运算 99 * 94 - 6.35 + 100 / 1024;多次四则运算 3 * 3 + 3 * 16 - 7 - 5 + 4 / 2 + 22;以上综合不⽀持：带括号的运算 1 * (2 - 3);其他数学运算3. 代码实现/*** js四则混合运算计算器功能实现（约20⾏+ ⾯条代码）* @param {string} str 输⼊的四则运算字符串* @return {number} 输出结果*/const calculator = (str) => {// 定义添加字符函数const add = (arr, symbol) => {let length = arr.length;while (length > 1) {arr.splice(length - 1, 0, symbol); // 在每⼀项后⾯添加对应的运算符length--;}return arr; // ⽬的是得到⼀个改变长度的数组}const array = add(str.replace(/\s*/g,"").split('+'), '+').map(it => add(it.split('-'), '-').map(it => add(it.split('*'), '*').map(it => add(it.split('/'), '/')))).flat(3);;// 先运算乘除法['*', '/'].map(it => {while (array.includes(it)) {const index = array.findIndex(o => o === it);index > 0 && it === '*' ? array.splice(index - 1, 3, (Number(array[index - 1]) * Number(array[index + 1]))) : array.splice(index - 1, 3, (Number(array[index - 1]) / Number(array[index + 1])));}})// 再执⾏加减法，即从左⾄右的计算while (array.length > 1) {array[1] === '+' ? array.splice(0, 3, (Number(array[0]) + Number(array[2]))) : array.splice(0, 3, (Number(array[0]) - Number(array[2])));}return Number(array[0]).toFixed(2);}如果对 ES6 语法还算熟悉的话，应该可以轻松阅读代码的。

JS实现计算器带三角函数根号

JS实现计算器带三角函数根号以下是一个使用JavaScript实现的计算器代码，它包含了三角函数、开方等功能。

总字数超过1200字，但是实际代码量并不多，请自行补充。

```javascript//获取页面元素const display = document.getElementById("display");const buttons = document.getElementsByClassName("btn");//绑定按钮事件for (let i = 0; i < buttons.length; i++)buttons[i].addEventListener("click", buttonClick);//按钮点击事件处理函数function buttonClick(event)const buttonValue = event.target.innerHTML;if (buttonValue === "=")calculate(;} else if (buttonValue === "C")clear(;} else if (buttonValue === "√")squareRoot(;} else if (buttonValue === "sin")sine(;} else if (buttonValue === "cos")cosine(;} elseappendValue(buttonValue);}//向显示屏追加内容function appendValue(value)display.value += value;//清空显示屏function cleadisplay.value = "";//计算结果function calculattryconst result = eval(display.value); // 使用eval计算表达式display.value = result.toFixed(4); // 结果四舍五入保留4位小数} catch (error)display.value = "Error";}//计算平方根function squareRootryconst result = Math.sqrt(eval(display.value));display.value = result.toFixed(4);} catch (error)display.value = "Error";}//计算正弦值function sintryconst result = Math.sin(eval(display.value) * (Math.PI / 180)); // 将角度转换为弧度display.value = result.toFixed(4);} catch (error)display.value = "Error";}//计算余弦值function cosintryconst result = Math.cos(eval(display.value) * (Math.PI / 180)); // 将角度转换为弧度display.value = result.toFixed(4);} catch (error)display.value = "Error";}```HTML部分：```html<!DOCTYPE html><html><head><title>Calculator</title><link rel="stylesheet" type="text/css" href="style.css"> </head><body><div id="calculator"><input type="text" id="display" readonly> <div id="buttons"><div class="row"><button class="btn">7</button><button class="btn">8</button><button class="btn">9</button><button class="btn">/</button></div><div class="row"><button class="btn">4</button><button class="btn">5</button><button class="btn">6</button><button class="btn">*</button></div><div class="row"><button class="btn">1</button><button class="btn">2</button><button class="btn">3</button><button class="btn">-</button></div><div class="row"><button class="btn">0</button><button class="btn">.</button><button class="btn">+</button><button class="btn">=</button></div><div class="row"><button class="btn">C</button><button class="btn">√</button> <button class="btn">sin</button> <button class="btn">cos</button> </div></div></div><script src="script.js"></script> </body></html>```CSS部分：```css#calculatorwidth: 200px;margin: 0 auto;padding: 20px;#displaywidth: 100%;margin-bottom: 10px;padding: 5px;font-size: 20px;.rowdisplay: flex;.buttonflex: 1;margin-right: 5px;padding: 10px;font-size: 16px;```请注意，这只是一个简单的示例，实际的计算器功能可能更加复杂，需要根据具体需求进行适当的修改和扩展。

网页计算器--JS代码

网页计算器的界面：该计算其代码如下：<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head id="Head1" runat="server"><title>网页计算器</title></head><script type="text/javascript">var t;t = self.setInterval("ShowTime()", 10);var Exp = "";function ShowTime() {var Today = new Date(); //这条语句要放在该函数内，而不能作为全局变量hours = Today.getHours(); minutes = Today.getMinutes(); second = Today.getSeconds();if (hours < 10) hours = "0" + hoursif (minutes < 10) minutes = "0" + minutesif (second < 10) second = "0" + seconddocument.all.time.value = hours + ":" + minutes + ":" + second;}function MyFun() {alert(Exp);}//获取光标在ID为obj控件的位置，返回下标function getPos(obj) {obj.focus();var s = document.selection.createRange();s.setEndPoint("StartToStart", obj.createTextRange())return s.text.length;}//设置光标位置的函数function setCursor(ctrl, pos){if(ctrl.setSelectionRange){ctrl.focus();ctrl.setSelectionRange(pos,pos);}else if (ctrl.createTextRange){var range = ctrl.createTextRange();range.collapse(true);range.moveEnd('character', pos);range.moveStart('character', pos);range.select();}}//删除表达式中的元素function Delete() {var Len = document.all.In.value.length;Exp = document.all.In.value;var Arr = Exp.split("");var pos = getPos(In);Arr.splice(pos - 1, 1, "");var toStr = "";for(var j = 0; j < Arr.length; ++j)toStr += Arr[j];Exp = toStr;Arr = toStr.split("");document.all.In.value = toStr;setCursor(In,pos - 1);}//清除表达式function Clearn() {document.all.In.value = "";}function addParentheses(strObj) {var Temp = strObj;var Arr = Temp.split("");for (var i = 0; i < Arr.length; ++i) {if (Arr[i] == "s" || Arr[i] == "c" || Arr[i] == "t" || Arr[i] == "√"){if (Arr[i + 1] != "("){Arr.splice(i, 1, Arr[i] + "(");var toStr = "";for(var j = 0; j < Arr.length; ++j)toStr += Arr[j];Arr = toStr.split("");var Index = i + 2;if (Arr[Index] != "s" && Arr[Index] != "c" && Arr[Index] != "t" && Arr[Index] != "√"){var Bol = true;while (Bol) {if (Arr[Index + 1] == "+" || Arr[Index + 1] == "-" || Arr[Index + 1] == "*" || Arr[Index + 1] == "/" || Arr.length <= (Index + 1)){Arr.splice(Index, 1, Arr[Index] + ")");var toStr = "";for(var l = 0; l < Arr.length; ++l)toStr += Arr[l];Arr = toStr.split("");Bol = false;}++Index;}var S = "";for(var k = 0; k < Arr.length; ++k)S += Arr[k];S = Arr.toString();}//如果参数是函数else{var val = 0;var Bol = true;var hasPar = false;while (Bol){if (Arr[Index + 1] == "("){hasPar = true;val++;}if (Arr[Index + 1] == ")")--val;//没有括号的情况if (((Arr[Index + 1] == "+" || Arr[Index + 1] == "-" || Arr[Index + 1] == "*" || Arr[Index + 1] == "/") && !hasPar) || (Index + 1) >= Arr.length){Arr.splice(Index, 1, Arr[Index] + ")");var toStr = "";for(var j = 0; j < Arr.length; ++j)toStr += Arr[j];Arr = toStr.split("");Bol = false;}//有括号的情况if (val == 0 && hasPar){Arr.splice(Index + 1, 1,Arr[Index + 1] + ")");var toStr = "";for(var j = 0; j < Arr.length; ++j)toStr += Arr[j];Arr = toStr.split("");Bol = false;}++Index;}}}}var Str = "";for (var m = 0; m < Arr.length; ++m)Str += Arr[m];Exp = Str;}}//在表达式中添加表达式元素function addElement(Ele) {var Arr = new Array();Exp = document.all.In.value;var Index = getPos(In);if (Index >= Exp.length) {Exp += Ele;}else {Arr = Exp.split("");var Cha = Arr[Index];Arr.splice(Index, 1, Ele + Cha);var Str = "";for (var i = 0; i < Arr.length; ++i)Str += Arr[i];Exp = Str;}document.all.In.value = Exp;setCursor(In,Index + Ele.length);}function Input1() {addElement("1");}function Input2() {addElement("2");}function Input3() {addElement("3");}function Input4() {addElement("4");}function Input5() {addElement("5");}function Input6() {addElement("6");}function Input7() {addElement("7");}function Input8() {addElement("8");}function Input9() {addElement("9");}function Input0() {addElement("0");}function InputDot() {addElement(".");}function InputSin() {addElement("sin");}function InputCos() {addElement("cos");}function InputTan() {addElement("tan");}function InputSqtr() {addElement("√");}function InputAdd() {addElement("+");}function InputMin() {addElement("-");}function InputMult() {addElement("*");}function InputDiv() {addElement("/");}function InputPI() {addElement("3.141592"); }function InputLPar() {addElement("(");}function InputRPar() {addElement(")");}function InputLn() {addElement("ln");}function InputLog() {addElement("log");}function InputEql() {Exp = document.all.In.value;var Str = "";Str = Exp.replace(/sin/g, "s");Str = Str.replace(/cos/g, "c");Str = Str.replace(/tan/g, "t");addParentheses(Str);Exp = Exp.replace(/t/g, "Math.tan");Exp = Exp.replace(/s/g, "Math.sin");Exp = Exp.replace(/c/g, "Math.cos");Exp = Exp.replace(/√/g, "Math.sqrt");var result = eval(Exp);document.all.Restlt.value = result;}</script><body ><table border="8" bgcolor="rgb(50,200,100)" align= "center" cellspacing="0" cellpadding="0", width="250pt"><tr><td><label id = "Lab" ></label> 计算器</td></tr></table><table border="1" bgcolor="rgb(50,200,100)" align= "center" cellspacing="0" cellpadding="0", width="250pt"><tr><td><input id = "In" type = "text" style="width:160px" /></td><td><input id = "bs" type = "button" value = "Backspace" style="width:75px" onclick = "Delete();"/></td></tr></table><table border="1" bgcolor="rgb(50,200,100)" align= "center" cellspacing="0" cellpadding="0", width="250pt"><tr><td><input id = "Restlt" type = "text" style="width:110px" /></td><td><input id = "Clearn" type = "button" value = "Clearn" style="width:60px" onclick = "Clearn();" /></td><td><input id = "time" type = "text" style="width:60px" /></td></tr></table><table border="5" bgcolor="rgb(50,200,100)" align= "center" cellspacing="0" cellpadding="0", width="250pt"><tr><td><input type = "button" id = "N1" style="width:50px" value = "1" onclick = "Input1();"/></td><td><input type = "button" id = "N2" style="width:50px" value = "2" onclick = "Input2();" /></td><td><input type = "button" id = "N3" style="width:50px" value = "3" onclick = "Input3();" /></td><td><input type = "button" id = "Add" style="width:40px" value = "+" onclick ="InputAdd();" /></td><td><input type = "button" id = "Sub" style="width:40px" value = "-" onclick = "InputMin();"/></td></tr><tr><td><input type = "button" id = "N4" style="width:50px" value = "4" onclick = "Input4();"/></td><td><input type = "button" id = "N5" style="width:50px" value = "5" onclick = "Input5();" /></td><td><input type = "button" id = "N6" style="width:50px" value = "6" onclick = "Input6();" /></td><td><input type = "button" id = "Times" style="width:40px" value = "*" onclick = "InputMult();" /></td><td><input type = "button" id = "Divd" style="width:40px" value = "/" onclick = "InputDiv();" /></td></tr><tr><td><input type = "button" id = "N7" style="width:50px" value = "7" onclick = "Input7();"/></td><td><input type = "button" id = "N8" style="width:50px" value = "8" onclick = "Input8();" /></td><td><input type = "button" id = "N9" style="width:50px" value = "9" onclick = "Input9();" /></td><td><input type = "button" id = "Sqt" style="width:40px" value = "√" onclick = "InputSqtr();" /></td><td><input type = "button" id = "sin" style="width:40px" value = "sin" onclick = "InputSin();" /></td></tr><tr><td><input type = "button" id = "N0" style="width:50px" value = "0" onclick = "Input0();"/></td><td><input type = "button" id = "Dot" style="width:50px" value = "." onclick = "InputDot();" /></td><td><input type = "button" id = "Eql" style="width:50px" value = "=" onclick = "InputEql();" /></td><td><input type = "button" id = "cos" style="width:40px" value = "cos" onclick = "InputCos();" /></td><td><input type = "button" id = "tan" style="width:40px" value = "tan" onclick = "InputTan();" /></td></tr><tr><td><input type = "button" id = "PI" style="width:50px" value = "π" onclick = "InputPI();"/></td><td><input type = "button" id = "L_Par" style="width:50px" value = "(" onclick = "InputLPar();" /></td><td><input type = "button" id = "R_Par" style="width:50px" value = ")" onclick = "InputRPar();" /></td><td><input type = "button" id = "Ln" style="width:40px" value = "ln" onclick = "InputLn();" /></td><td><input type = "button" id = "Log" style="width:40px" value = "log" onclick = "InputLog();" /></td></tr></table><input id = "Input" type = "button" value = "click" onclick = "MyFun();" /> <form id="form1" runat="server"><div></div></form></body></html>。

javascirpt网页计算器实验报告

<TD><INPUT name="divButton2" type="button" id="divButton2" value=" ÷ " ></TD>
</TR>
<TR>
<TD>计算结果</TD>
<TD colspan="3"><INPUT name="txtResult" type="text" class="textBaroder" id="txtResult" size="25"></TD>
&;BODY>
<IMG src="images/logo.gif" width="240" height="31" >欢迎您来淘宝！
<FORM action="" method="post" name="myform" id="myform">
<TABLE border="0" bgcolor="#C9E495" align="center">
divButton2.onclick = function(){
if(parseInt(a("txtNum2").value)!=0)
{txtResult.value = parseInt(a("txtNum1").value) / parseInt(a("txtNum2").value);}

用java编写一个简易的计算器代码

import java.awt.BorderLayout;import java.awt.Color;import java.awt.GridLayout;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import java.awt.event.KeyEvent;import java.awt.event.KeyListener;import javax.swing.JButton;import javax.swing.JFrame;import javax.swing.JPanel;import javax.swing.JTextField;/使用java 语言开发一个简易计算器/public class TestJsq extends JFrame implements ActionListener, KeyListener {private JTextField jtf;private JButton jb_bk, jb_ce, jb_c;private String xs = "";private double sum = 0;private int fh;public static void main(String[] args) {new TestJsq().creatCUI();}public void creatCUI() {JFrame jf = new JFrame();jf.setTitle("计算器");jtf = new JTextField("0.");jtf.setHorizontalAlignment(JTextField.RIGHT);jf.add(jtf, BorderLayout.NORTH);JPanel jp_main = new JPanel(new BorderLayout());jf.add(jp_main);JPanel jp1 = new JPanel(new GridLayout(1, 3, 1, 1));jb_bk = new JButton("Backspace");jb_bk.setForeground(Color.RED);jb_bk.addActionListener(this);jb_ce = new JButton("CE");jb_ce.setForeground(Color.RED);jb_ce.addActionListener(this);jb_c = new JButton("C");jb_c.setForeground(Color.RED);jb_c.addActionListener(this);jp1.add(jb_bk);jp1.add(jb_ce);jp1.add(jb_c);jp_main.add(jp1, BorderLayout.NORTH);JPanel jp2 = new JPanel(new GridLayout(4, 5, 1, 1));String str[] = { "7", "8", "9", "/", "sqrt", "4", "5", "6", "", "%","1", "2", "3", "-", "1/x", "0", "+/-", ".", "+", "=" };for (int i = 0; i < 20; i++) {JButton jb = new JButton(str[i]);jb.addActionListener(this);jb.setForeground(Color.blue);if (i == 3 || i == 8 || i == 13 || i == 18 || i == 19) { jb.setForeground(Color.RED);}jp2.add(jb);}jp_main.add(jp2, BorderLayout.CENTER);jf.setResizable(false);jf.setBounds(50, 50, 350, 350);jf.setVisible(true);}Overridepublic void actionPerformed(ActionEvent e) {String s = e.getActionCommand();if (s.equals("CE") || s.equals("C")) {xs = "";jtf.setText("0.");} else if (s.equals("Backspace")) {String str = xs.substring(0, xs.length() - 1);xs = str;jtf.setText(xs);} else if (s.equals("7") || s.equals("8") || s.equals("9") || s.equals("4") || s.equals("5") || s.equals("6")|| s.equals("1") || s.equals("2") || s.equals("3")|| s.equals("0") || s.equals(".")) {xs = xs + s;jtf.setText(xs);} else if (s.equals("+/-")) {double x = Double.parseDouble(xs);xs="" + (-x);jtf.setText(xs);} else if (s.equals("/")) {fh = 4;int point = xs.indexOf(".");if (point = -1) {String strt = xs.substring(0, point);String z = xs.substring(point + 1, xs.length());int z_num = z.length();sum = Integer.decode(strt) + (double) (Integer.decode(z))/ (10 z_num);} else {sum = Integer.decode(xs);}xs = "";jtf.setText(null);} else if (s.equals("")) {fh = 3;int point = xs.indexOf(".");if (point = -1) {String strt = xs.substring(0, point);String z = xs.substring(point + 1, xs.length());int z_num = z.length();sum = Integer.decode(strt) + (double) (Integer.decode(z))/ (10 z_num);} else {sum = Integer.decode(xs);}xs = "";jtf.setText(null);} else if (s.equals("-")) {fh = 2;int point = xs.indexOf(".");if (point = -1) {String strt = xs.substring(0, point);String z = xs.substring(point + 1, xs.length());int z_num = z.length();sum = Integer.decode(strt) + (double) (Integer.decode(z))/ (10 z_num);} else {sum = Integer.decode(xs);}xs = "";jtf.setText(null);} else if (s.equals("+")) {fh = 1;int point = xs.indexOf(".");if (point = -1) {String strt = xs.substring(0, point);String z = xs.substring(point + 1, xs.length());int z_num = z.length();sum = Integer.decode(strt) + (double) (Integer.decode(z))/ (10 z_num);} else {sum = Integer.decode(xs);}xs = "";jtf.setText(null);} else if (s.equals("sqrt")) {double x = Double.parseDouble(xs);double x1 = Math.sqrt(x);xs = x1 + "";jtf.setText(xs);} else if (s.equals("%")) {double x = Double.parseDouble(xs);x=0.01 xx;xs=x+"";jtf.setText(xs);} else if (s.equals("1/x")) {if (xs == "0") {jtf.setText("除数不能为0");} else {double x = Double.parseDouble(xs);double x1 = 1 / x;xs = x1 + "";jtf.setText(String.valueOf(xs));}} else if (s.equals("=")) {if (fh = 0) {switch (fh) {case 1:int point1 = xs.indexOf(".");if (point1 = -1) {String s1 = xs.substring(0, point1);String z1 = xs.substring(point1 + 1, xs.length());int z1_num = z1.length();xs = "";double ss1 = Integer.decode(s1)+ (double) Integer.decode(z1) / (10 z1_num);sum = sum + ss1;} else {sum = sum + Integer.decode(xs);xs = "";}fh = 0;break;case 2:int point2 = xs.indexOf(".");if (point2 = -1) {String s2 = xs.substring(0, point2);String z2 = xs.substring(point2 + 1, xs.length());int z2_num = z2.length();xs = "";double ss2 = Integer.decode(s2)+ (double) Integer.decode(z2) / (10 z2_num);sum = sum - ss2;} else {sum = sum - Integer.decode(xs);xs = "";}fh = 0;break;case 3:int point3 = xs.indexOf(".");if (point3 = -1) {String s3 = xs.substring(0, point3);String z3 = xs.substring(point3 + 1, xs.length());int z1_num = z3.length();xs = "";double s4 = Integer.decode(s3)+ (double) Integer.decode(z3) / (10 z1_num);sum = sum s4;} else {sum = sum Integer.decode(xs);xs = "";}fh = 0;break;case 4:int point4 = xs.indexOf(".");if (point4 = -1) {String s4 = xs.substring(0, point4);String z4 = xs.substring(point4 + 1, xs.length());int z4_num = z4.length();xs = "";double s5 = Integer.decode(s4)+ (double) Integer.decode(z4) / (10 z4_num);sum = sum / s5;} else {sum = sum / Integer.decode(xs);xs = "";}fh = 0;break;default:break;}xs = String.valueOf(sum);jtf.setText(xs);fh = 0;} else {jtf.setText(null);}}}Overridepublic void keyPressed(KeyEvent e) {// TODO Auto-generated method stub}Overridepublic void keyReleased(KeyEvent e) { // TODO Auto-generated method stub }Overridepublic void keyTyped(KeyEvent e) { // TODO Auto-generated method stub }}。

简易计算器代码

24点计算器的Javascript实现

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，如果是，那么就找到了⼀种，否则继续往下执⾏。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

</td>
<td>
<input type="button" style="width:40px" value="pi" onclick="cal.totoal.value=Math.PI">
</td>
<td>
<input type="button" style="width:40px" value="E" onclick="cal.total.value=Math.E">
</td>
<td>
<input type="button" style="width:40px" value="7" onclick="addNum('7')">
</td>
<td>
<input type="button" style="width:40px" value="8" onclick="addNum('8')">
preOper=true;
break;
case "asin":
cal.total.value=Math.asin(cal.total.value);
preOper=true;
break;
case "acos":
cal.total.value=Math.acos(cal.total.value);
preOper=true;
</td>
<td>
<input type="button" style="width:40px" value="9" onclick="addNum('9')">
</td>
<td>
<input type="button" style="width:40px" value="*" onclick="setOper('*')">
{
//alert(curOper);
num1=0+cal.total.value;/*将第一个值用num1保存，采用‘0+’把total.value字符串转化为数值型，类似于使用parsefloat（）0方法*/
curOper=oper;
//alert(num1);
}
else
{
count();
curOper=oper;
preOper=true;
}
preOper="start";
}
function setOper(oper)//当点击“+-*、”时，设置当前的运算法则
{
//alert(curOper);
preOper=true;//为布尔型，表示再次之前是否刚刚单击过双边运算法符
if(curOper=="start")
{
if(curOper!="start")
{
switch(curOper)//根据curOper的值确定运算法则
{
case "+":
num1=parseFloat(num1)+parseFloat(cal.total.value);break;
case "-":
num1=parseFloat(num1)-parseFloat(cal.total.value);break;
case "log":
cal.total.value=Math.log(cal.total.value);
preOper=true;
break;
case "exp":
cal.total.value=Math.exp(cal.total.value);
preOper=true;
break;
case "sqrt":
</td>
</tr>
<tr align="center">
<td>
<input type="button" style="width:40px" value="sqrt" onclick="useFunc('sqrt')">
</td>
<td>
<input type="button" style="width:40px" value="1/x" onclick="useFunc('1/x')">
</td>
<td>
<input type="button" style="width:40px" value="0" onclick="addNum('0')">
</td>
<td>
<input type="button" style="width:40px" value="." onclick="addNum('.')">
</td>
</tr>
<tr align="center">
<td>
<input type="button" style="width:40px" value="tan" onclick="useFunc('tan')">
</td>
<td>
<input type="button" style="width:40px" value="atan" onclick="useFunc('atan')">
</td>
</tr>
<tr align="center">
<td>
<input type="button" style="width:40px" value="asin" onclick="useFunc('asin')">
</td>
<td>
<input type="button" style="width:40px" value="acos" onclick="useFunc('acos')">
break;
case "tan":
cal.total.value=Math.tan(cal.total.value);
preOper=true;
break;
case "atan":
cal.total.value=Math.atan(cal.total.value);
preOper=true;
break;
}
//alert(curOper);
}
function useFunc(func)
{
switch(func)
{
case "sin":
cal.total.value=Math.sin(cal.total.value);
preOper=true;
break;
case "cos":
cal.total.value=Math.cos(cal.total.value);
</td>
</tr>
<tr align="center">
<td>
<input type="button" style="width:40px" value="log" onclick="useFunc('log')">
</td>
<td>
<input type="button" style="width:40px" value="exp" onclick="useFunc('exp')">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">

JavaScript编写的简易计算器

JavaScript实现简单网页版计算器

VB简易计算器代码

用java代码写的简易计算器（可以实现基本的加减乘除功能）

JS实现简易计算器的7种方法

简易计算器代码

javascript应用实例

javascript计算器报告附源代码

简易计算器小程序使用微信小程序开发工具和JavaScript开发

js中简单计算器的代码

js中简单计算器的代码

利用Javascript实现BMI计算器

最新js-cal网页简易计算器

html+js实现简单的计算器代码（加减乘除）

JavaScript实现计算器的四则运算功能

JS实现计算器带三角函数根号

网页计算器--JS代码

javascirpt网页计算器实验报告

用java编写一个简易的计算器代码

简易计算器代码

24点计算器的Javascript实现